.selector
{
  /* the common selector */
}

.wrapper
{
  position: relative;

  display: inline-block;

  color: black;
}

.native
{
  position: absolute;

  margin: 0;

  opacity: 0;
  border: 0;
  outline: 0;
}

.control
{
  position: relative;

  display: inline-block;

  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  transition: background .1s ease-out,box-shadow .1s ease-out;

  border: none;
  border-radius: 3px;
  outline: none;
  background: white;
  box-shadow: inset 0 0 0 1px #ccc;

  font: inherit;
  line-height: normal;

  -webkit-tap-highlight-color: transparent;
}

.control:hover
{
  box-shadow: inset 0 0 0 1px #b3b3b3;
}

.control:active
{
  background: #f6f5f3;
}

.control:before
{
  visibility: hidden;

  content: '\00A0';
}

.control:after
{
  position: absolute;

  display: block;
  visibility: hidden;

  content: '';
  transition: bottom .05s ease-out,opacity .05s ease-out,visibility 0s .05s;

  opacity: 0;
}

.label
{
  margin: 0 0 0 .45em;

  font: inherit;
  line-height: normal;
}

.native:checked + .control
{
  background: #ffeba0;
  box-shadow: inset 0 0 0 1px #ccbd80;
}

.native:checked + .control:after
{
  visibility: visible;

  transition: bottom .05s ease-out,opacity .05s ease-out;

  opacity: 1;
}

.native:focus + .control
{
  box-shadow: inset 0 0 0 2px #ffdb4d;
}

.native:disabled + .control
{
  cursor: default;

  background: #ebebeb;
  box-shadow: none;
}

.native:disabled + .control:after,
.native:disabled ~ .label
{
  opacity: .5;
}