Cómo personalizar checkboxes y botones de radio con CSS

Los checkboxes y los botones de radio son elementos muy comunes en cualquier formulario web que se precie. Generalmente, solemos utilizar el estilo por defecto que nos dicta el navegador con el que estemos viendo la web. Pero si lo quieres es que tu UI luzca alucinante o que el formulario pegue con el diseño de tu web, debes personalizar todos los campos inputs del mismo.

Personalizando los checkboxes y los botones de radio, sobreescribiremos el estilo por defecto del navegador y cambiaremos su apariencia. Para personalizar el estilo de estos campos simplemente te puedes ayudar con CSS, sin nada de Javascript. En este tutorial, veremos cómo personalizar los checkboxes y los botones de radio con CSS.

Personalizar los checkboxes con CSS

En el siguiente código crearemos unos checkboxes personalizados con solo CSS.

Código HTML

El siguiente HTML define los checkboxes del formulario.

<label class="checkbox">One
    <input type="checkbox" checked="checked">
    <span class="check"></span>
</label>
<label class="checkbox">Two
    <input type="checkbox">
    <span class="check"></span>
</label>
<label class="checkbox">Three
    <input type="checkbox">
    <span class="check"></span>
</label>
<label class="checkbox">Four
    <input type="checkbox">
    <span class="check"></span>
</label>

Código CSS

Utiliza el siguiente código CSS para sobreescribir el estilo por defecto y utilizar el personalizado.

/* custom checkbox */
.checkbox {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* hide the browser's default checkbox */
.checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* create custom checkbox */
.check {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border: 1px solid #ccc;
}

/* on mouse-over, add border color */
.checkbox:hover input ~ .check {
    border: 2px solid #2489C5;
}

/* add background color when the checkbox is checked */
.checkbox input:checked ~ .check {
    background-color: #2489C5;
    border:none;
}

/* create the checkmark and hide when not checked */
.check:after {
    content: "";
    position: absolute;
    display: none;
}

/* show the checkmark when checked */
.checkbox input:checked ~ .check:after {
    display: block;
}

/* checkmark style */
.checkbox .check:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

Personalizar los botones de radio con CSS

En el siguiente código crearemos unos botones de radio personalizados con solo CSS.

Código HTML

El siguiente HTML define los botones de radio del formulario.

<label class="radio">One
    <input type="radio" checked="checked" name="radio">
    <span class="check"></span>
</label>
<label class="radio">Two
    <input type="radio" name="radio">
    <span class="check"></span>
</label>
<label class="radio">Three
    <input type="radio" name="radio">
    <span class="check"></span>
</label>
<label class="radio">Four
    <input type="radio" name="radio">
    <span class="check"></span>
</label>

Código CSS

Utiliza el siguiente código CSS para sobreescribir el estilo por defecto y utilizar el personalizado.

/* custom radio */
.radio {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* hide the browser's default radio button */
.radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* create custom radio */
.radio .check {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 50%;
}

/* on mouse-over, add border color */
.radio:hover input ~ .check {
    border: 2px solid #2489C5;
}

/* add background color when the radio is checked */
.radio input:checked ~ .check {
    background-color: #2489C5;
    border:none;
}

/* create the radio and hide when not checked */
.radio .check:after {
    content: "";
    position: absolute;
    display: none;
}

/* show the radio when checked */
.radio input:checked ~ .check:after {
    display: block;
}

/* radio style */
.radio .check:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP