我正在尝试设计一个复选框的样式ReactJSIE11 的环境，但似乎没有取得太大成功。有人可以建议吗？代码如下：
CSS:
.squared {
input[type=checkbox] {
border-radius: 4px;
background: #ff0000;
width:100px;
}
HTML:
<Col numCol={2} className="col-w-select squared">
<input style={{float: 'left', borderColor: 'red', border: '3px'}} type="checkbox" checked={isChecked} /> <span className={(String(currentlyClicked) !== String(item[idField])) ? 'l-collapse-icon' : 'l-expand-icon'}> </span>
</Col>
请注意，在输入标记中应用样式属性
本身好像没有什么影响！？
Thanks
这里的环境基本上与 CSS 样式元素无关。
这real这里的问题是您正在尝试设置一个在浏览器中不起作用的复选框的样式。
这是什么MDN says https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms#Check_boxes_and_radio_buttons对这个：
单独设置复选框或单选按钮的样式有点混乱。例如，复选框和单选按钮的大小并不是真正需要更改的，如果您尝试这样做，浏览器的反应可能会非常不同。
解决此问题的一种方法是创建一个“假”复选框并按照您想要的方式设置其样式，同时隐藏“真实”复选框。
下面是我在项目中使用的一个实现。上面的 MSN 链接还提供了一些替代（CSS）解决方案......
var Demo = React.createClass({
getInitialState() {
return {isChecked: false};
},
toggleCheck() {
this.setState({isChecked: !this.state.isChecked});
},
render: function() {
return (
<span onClick={this.toggleCheck}>
<input type="checkbox" checked={this.state.isChecked} />
<span></span>
</span>
);
}
});
ReactDOM.render(
<Demo />,
document.getElementById('container')
);
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + span {
display: inline-block;
position: relative;
top: -1px;
width: 12px;
height: 12px;
margin: -1px 0px 0 0;
vertical-align: middle;
background: white left top no-repeat;
border: 1px solid #ccc;
cursor: pointer;
}
input[type="checkbox"]:checked + span {
background: #D9534F -19px top no-repeat;
}
input[type="checkbox"] + span {
margin-right: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>
如果您正在使用反应引导 /questions/tagged/react-bootstrap，只需将上面的 JSX 位替换为：
<Checkbox onChange={this.toggleCheck} checked={this.toggleCheck} inline>
<span></span>
</Checkbox>
祝你好运。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
