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 saysは何です。たとえば、チェックボックスやラジオボタンのサイズは実際に変更するつもりはなく、ブラウザーの操作が非常に異なる場合があります。

これを回避するには、「偽」のチェックボックスを作成し、「実際の」チェックボックスを非表示にしてスタイルを変更します。

以下は私のプロジェクトで使用している実装です。

：あなたは react-bootstrapを使用している場合、上記のMSNリンクがちょうどこれと上記JSXビットを置き換え、...だけでなく

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>

---

をいくつかの代替（CSS）ソリューションを提供しています

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

幸運。