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

請注意，在 input 標簽本身內應用樣式屬性似乎沒有影響！？

謝謝

Answer 1

環境在這里基本上與 CSS 樣式元素無關。 這里真正的問題是您正在嘗試設置一個在瀏覽器中不起作用的復選框。

以下是MDN對此的說明：

單獨設置復選框或單選按鈕的樣式有點麻煩。 例如，復選框和單選按鈕的大小並不是真的要改變，如果你嘗試這樣做，瀏覽器的反應可能會有很大不同。

一種解決方法是創建一個“假”復選框並按照您想要的方式對其進行樣式設置，同時隱藏“真實”復選框。

下面是我在我的項目中使用的一個實現。 上面的 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

按照@ 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>