在 ReactJS 环境中设置复选框样式

Question

我正在尝试在 IE11 的 ReactJS 环境中设置复选框的样式，但似乎没有取得多大成功。有人可以请教吗？代码如下：

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'}>&nbsp;</span>
</Col>

请注意，在输入标签中应用样式属性 本身好像没有影响！？

谢谢

Answer 1

这里的环境基本上与 CSS 样式元素无关。 真正的问题是你试图设置一个在浏览器中不起作用的复选框。

MDN says 对此有何评论：

单独设置复选框或单选按钮的样式有点麻烦。例如，复选框和单选按钮的大小并不是真的要更改，如果您尝试这样做，浏览器的反应可能会非常不同。

解决方法是创建一个“假”复选框并按照您想要的方式设置样式，同时隐藏“真实”复选框。

以下是我在项目中使用的实现。上面的 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>

---

如果您使用的是react-bootstrap，只需将上面的 JSX 位替换为：

<Checkbox onChange={this.toggleCheck} checked={this.toggleCheck} inline>
  <span></span>
</Checkbox>

祝你好运。

Answer 2

只需将此代码添加到您的 CSS，您就可以设置复选框的样式！

input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* create custom checkbox appearance */
    display: inline-block;
    width: 25px;
    height: 25px;
    padding: 6px;
    /* background-color only for content */
    background-clip: content-box;
    border: 1.5px solid #bbbbbb;
    border-radius: 6px;
    background-color: #e7e6e7;
    margin-left: 15px;
    margin-right: 15px;

    &:checked{
        background-color: #ff0000;
    }

    &:focus{
        outline: none !important;
    }
}

Answer 3

在@Chrisanswer 之后，我已经更改了一些样式以满足我的需要，分享以防其他人正在寻找类似的东西。没有在IE11中测试过。

谢谢！

var Demo = React.createClass({
  getInitialState() {
    return {isChecked: false};
  },
  
  toggleCheck() {
    this.setState({isChecked: !this.state.isChecked});
  },
  
  render: function() {
    return (
      <span className="checkbox">
        <input type="checkbox" checked={this.state.isChecked} />
        <span className="wrapper" onClick={this.toggleCheck}>
            <span className="knob"></span>
        </span>
      </span>
    );
  }
});

ReactDOM.render(
  <Demo />,
  document.getElementById('container')
);

.checkbox input[type="checkbox"] {
    display: none;
}
.checkbox input[type="checkbox"]:checked + .wrapper {
    background-color: #8cde95;
}
.checkbox input[type="checkbox"]:checked + .wrapper .knob {
    left: 20px;
}
.checkbox .wrapper {
    background-color: #666;
    border: 1px solid #666;
    border-radius: 10px;
    width: 42px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    outline: none;
}
.checkbox .knob {
    background-color: white;
    border: 1px solid #666;
    border-radius: 100%;
    display: inline-block;
    margin-left: 2px;
    position: relative;
    width: 16px;
    height: 16px;
    left: 0;
    transition: left 100ms ease-in-out 0s;
}

<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>