Styling elements with CSS is the main focus here, rather than considering the environment.
The issue lies in attempting to style a checkbox, which is often problematic across different browsers.
According to the MDN documentation:
Customizing styles for checkboxes or radio buttons can be complex. Changing sizes and appearances of these elements may not work as expected, and browsers may interpret it differently.
To address this problem, one solution is to create a custom "fake" checkbox that can be styled while hiding the original checkbox.
Below is an example of how this can be implemented in a project, along with alternative solutions provided by 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>
If you're using react-bootstrap, you can replace the JSX code above with the following:
<Checkbox onChange={this.toggleCheck} checked={this.toggleCheck} inline>
<span></span>
</Checkbox>
Best of luck with your styling endeavors.