在ReactJS环境中设置复选框的样式 [英] Styling a checkbox in a ReactJS environment

问题描述

我正在尝试在 ReactJS 环境中为IE11设置复选框样式，但似乎并没有取得太大的成功。谁能请教？代码如下：

I'm trying to style a checkbox in a ReactJS environment for IE11, but don't seem to be having much success. Can anyone please advise? The code is as follows:

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>

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

Please note that applying styling attributes within the input tag itself seems to have no affect!?

谢谢

推荐答案

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

The environment is basically irrelevant here for just styling elements with CSS. The real problem here is that you are trying to style a checkbox which doesn't really work in browsers.

这是什么 MDN对此说：

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

Styling a check box or a radio button by itself is kind of messy. For example, the sizes of check boxes and radio buttons are not really meant to be changed, and browsers can react very differently if you try to do it.

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

A workaround to this is to create a "fake" checkbox and style it the way you want, while hiding the "real" one.

下面是我在项目中使用的实现。上面的MSN链接也提供了一些替代（CSS）解决方案...

Below is an implementation I use in my project. The MSN link above provides some alternative (CSS) solutions as well...

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替换为：

If you are using react-bootstrap, just replace the JSX bit above with this:

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

祝你好运。

这篇关于在ReactJS环境中设置复选框的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！