checkbox

by Julien Etienne

HTML

<div class="selections">
  <div class="selection">
    <input type='checkbox' name='enable' value='valuable' id="enable" />
    <label for="enable">
      <div class="option">Enable</div>
    </label>
  </div>
  <div class="selection">
    <input type='checkbox' name='disable' value='valuable' id="disable" />
    <label for="disable">
      <div class="option">Disable</div>
    </label>
  </div>
</div>

CSS

body {
  background: black;
}

.selection {
  position: relative;
  float: left;
  width: 100px;
  display: inline-block;
}

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

input[type=checkbox] + label {
  border: 1px solid #999;
  height: 8px;
  width: 8px;
  display: inline-block;
  padding: 0;
  margin: 4px 0 0 7px;
}

input[type=checkbox]:checked + label {
  background: #E37222;
  border-color: #E37222;
  height: 8px;
  width: 8px;
  display: inline-block;
  padding: 0;
}

.option {
  margin: -4px 0 0 22px;
  padding: 0;
  color: #999;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer
}