在ReactJS环境下如何样式化复选框

Question

在ReactJS环境下如何样式化复选框

8

我正在尝试在ReactJS环境中为IE11样式化复选框，但似乎并不成功。有人能给些建议吗？以下是代码：

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>

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

- Drostan

CSS语法不支持嵌套。您是否使用诸如LESS / SASS之类的预处理器？
内联样式应该有效，但简写的border会覆盖borderColor，而将边框应用于复选框可能确实没有效果。float却很好用。这与React关系不大，在纯HTML + CSS中效果也是一样的。

- pawel

@jnoweb，我的回答对你有帮助吗？如果是的话，请考虑将其标记为“已接受”。 - Chris

3个回答

7

只需将此代码添加到您的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;
    }
}

- petarmanic

0

在@Chris 的回答之后，我稍微改变了样式以适应我的需求，并分享给其他需要的人。尚未在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>

- Facundo Colombier

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chris · Accepted Answer

这里环境基本上不相关，只用CSS样式元素。真正的问题是你正在尝试为在浏览器中无法正常工作的复选框设置样式。

以下是我在项目中使用的实现方式。上面的链接还提供了一些其他（CSS）解决方案...

MDN说：

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

解决此问题的一种方法是创建一个“假”复选框，并以所需的方式对其进行样式设置，同时隐藏“真”复选框。

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>

祝你好运。