JSFiddle - React, Tailwind, and code Playground

by Simon Price

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap.no-icons.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css">
<label for="animal-kitty">
  <input type="radio" name="animal" id="animal-kitty" value="kitty"/>
  <span>kitty</span>
</label>
<label for="animal-doggie">
  <input type="radio" name="animal" id="animal-doggie" value="doggie"/>
  <span>doggie</span>
</label>
<label for="animal-fishie">
  <input type="radio" name="animal" id="animal-fishie" value="fishie"/>
  <span>fishie</span>
</label>


<label for="animalc-kitty">
  <input type="checkbox" name="animalc" id="animalc-kitty" value="kitty"/>
  <span>kitty</span>
</label>
<label for="animalc-doggie">
  <input type="checkbox" name="animalc" id="animalc-doggie" value="doggie"/>
  <span>doggie</span>
</label>
<label for="animalc-fishie">
  <input type="checkbox" name="animalc" id="animalc-fishie" value="fishie"/>
  <span>fishie</span>
</label>

CSS

input[type="radio"],
input[type="checkbox"] {
  display:none;
}

input[type="radio"] + span:before,
input[type="checkbox"] + span:before {
  font-family: 'FontAwesome';
  padding-right: 3px;
  font-size: 20px;
}

input[type="radio"] + span:before {
  content: "\f10c"; /* circle-blank */
}

input[type="radio"]:checked + span:before {
  content: "\f111"; /* circle */
}

input[type="checkbox"] + span:before {
  content: "\f096"; /* check-empty */
}

input[type="checkbox"]:checked + span:before {
  content: "\f046"; /* check */
}

JavaScript

// NO JS!