JSFiddle - React, Tailwind, and code Playground

by Wietse De Vries

HTML

<div class="form-group">
  <div class="radio">
    <label>
      <input type="radio" name="options" value="1" checked/>1
    </label>
    <label>
      <input type="radio" name="options" value="2" />2
    </label>
  </div>
</div>

CSS

input[type=radio] {
  height: 28px;
  width: 28px;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  outline: none;
}
input[type=radio] {
  content: "";
  display: inline-block;
  vertical-align: middle;
  background: url('http://vbl.su/i/checkbox.png');
  width: 28px;
  height: 28px;
  overflow: hidden;
  cursor: pointer;
}
input[type=radio]:checked {
  background-position: -28px 0;
}