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

Posted 2023-03-05

【中文标题】在 ReactJS 环境中设置复选框样式

【英文标题】：Styling a checkbox in a ReactJS environment

【发布时间】：2017-07-26 08:32:47

【问题描述】：

我正在尝试在 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>

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

谢谢

【问题讨论】：

1. CSS 语法不支持嵌套。你使用像 LESS/SASS 这样的预处理器吗？ 2.内联样式应该可以工作，但是速记border会覆盖borderColor，并且对复选框应用边框可能确实没有效果。 float 工作正常。这和 React 关系不大，在纯 HTML+CSS 中效果也是一样的。

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

【参考方案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>

祝你好运。

【讨论】：

令人惊讶的是，我在收听onChange 事件时无法获得e.target.name 或e.target.id。它返回未定义，因为输入不在 DOM 中。那么在这种情况下我们该怎么办呢？

【参考方案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;
    

【参考方案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>