Styling a checkbox in a ReactJS environment

Question

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!?

Thanks

Answer 1

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.

Here's what the MDN says about this:

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.

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>

---

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>

Good luck.

Answer 2

Just add this code to your CSS, and you will be able to style your checkbox!

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;
    }
}