Skip to content

Instantly share code, notes, and snippets.

@cynazem
Created June 25, 2013 17:51
Show Gist options
  • Save cynazem/5860639 to your computer and use it in GitHub Desktop.
Save cynazem/5860639 to your computer and use it in GitHub Desktop.
Checkbox and Radio buttons (image replacement)
/* CHECKBOX & RADIOS */
/*********************/
input[type="radio"], input[type="checkbox"] {display: none}
input[type="radio"] + label,input[type="checkbox"] + label {display: block; padding-left: 20px; min-height: 18px; margin-bottom: 5px; cursor: pointer;}
input[type="checkbox"] + label {background: url(../images/ico-checkbox-normal.png) left top no-repeat} /* checkbox normal */
input[type="checkbox"] + label:hover {background: url(../images/ico-checkbox-hover.png) left top no-repeat} /* checkbox normal + hover */
input[type="checkbox"] + label:active {background: url(../images/ico-checkbox-active.png) left top no-repeat} /* checkbox clicado */
input[type="checkbox"]:checked + label{background: url(../images/ico-checkbox-checked.png) left top no-repeat} /* checkado + hover */
input[type="checkbox"]:checked + label:active {background: url(../images/ico-checkbox-active.png) left top no-repeat} /* checkbox checkado clicado */
input[type="checkbox"]:checked + label:hover {} /* checkbox normal checado + hover */
input[type="checkbox"]:disabled + label {background: url() left top no-repeat} /* checkbox normal desabilitado */
input[type="checkbox"]:disabled:checked + label {background: url() left top no-repeat}/* checkbox checado desabilitado */
input[type="radio"] + label {background: url(../images/ico-radio-normal.png) left top no-repeat} /* radio normal */
input[type="radio"] + label:hover {background: url(../images/ico-radio-hover.png) left top no-repeat} /* radio normal + hover */
input[type="radio"] + label:active {background: url(../images/ico-radio-active.png) left top no-repeat} /* radio clicado */
input[type="radio"]:checked + label{background: url(../images/ico-radio-checked.png) left top no-repeat} /* radio + hover */
input[type="radio"]:checked + label:active {background: url(../images/ico-radio-active.png) left top no-repeat} /* radio checkado clicado */
input[type="radio"]:checked + label:hover {} /* radio normal checado + hover */
input[type="radio"]:disabled + label {background: url() left top no-repeat} /* radio normal desabilitado */
input[type="radio"]:disabled:checked + label {background: url() left top no-repeat} /* radio checado desabilitado */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment