CSS checkbox y radios personalizados

3 minutos

css

No hay diseñador web que acabe agotado de personalizar los formularios. Son complejos y llenos de sutilezas que debes conocer. Y por si no fuera poco hay lugares imposibles de tocar como los input radio y los input checkbox… ¡Hasta ahora!

En el siguiente tutorial voy a enseñar como realizar un checkbox y un radio personalizado para un formulario en HTML. Usando la metodología BEM para organizar los estilos en un formato de componente fácil de construir o modificiar. Todo ello sin preocuparnos de las limitaciones propias del CSS logrando adaptar nuestros diseños. Además incluiré un resumen en SASS para que sea fácil de copiar. Compatible con todos los navegadores más utilizados: Chrome, Firefox, Edge, Safari…

DEMO

Pulsa en cada elemento para ver su funcionamiento.

Radio

Checkbox

Radio

Estructuramos nuestro radio de forma natural. Pero debemos incluir un span que será el lugar donde mostraremos la imagen con el sustituto al radio.

<p>
    <label class="custom-radio-checkbox">
        <!-- Input oculto -->
        <input class="custom-radio-checkbox__input" type="radio" name="genero" value="mujer" checked>
        <!-- Imagen en sustitucion -->
        <span class="custom-radio-checkbox__show custom-radio-checkbox__show--radio"></span>
        <!-- Texto -->
        <span class="custom-radio-checkbox__text">Mujer</span>
    </label>
</p>
<p>
    <label class="custom-radio-checkbox">
        <!-- Input oculto -->
        <input class="custom-radio-checkbox__input" type="radio" name="genero" value="hombre">
        <!-- Imagen en sustitucion -->
        <span class="custom-radio-checkbox__show custom-radio-checkbox__show--radio"></span>
        <!-- Texto -->
        <span class="custom-radio-checkbox__text">Hombre</span>
    </label>
</p>

Ocultamos los radios y en su lugar dejamos en los span una imagen de fondo que previamente hemos preparado.

/* Centra el input personalizado con el texto */
.custom-radio-checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-family: arial;
}

/* Modificador para dar la imagen de radio */
.custom-radio-checkbox__show--radio {
    background-image: url(radio-uncheck.png);
}

/* Oculta input original */
.custom-radio-checkbox > .custom-radio-checkbox__input {
    display: none;
}

/* Radio personalizado usando <span> */
.custom-radio-checkbox > .custom-radio-checkbox__show {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: .5rem;
    background-size: cover;
}

/* Cambia el radio personalizado cuando es pulsado */
.custom-radio-checkbox > .custom-radio-checkbox__input:checked + .custom-radio-checkbox__show--radio {
    background-image: url(radio-check.png);
}

La imagen sin pulsar sería la siguiente.

Radio sin pulsar

Y pulsado sería así.

Radio pulsado

Checkbox

Se trabaja de la misma forma. Primero declaramos nuestro input dentro de un label, sin olvidar un span vacío que será el futuro espacio para la imagen.

<label class="custom-radio-checkbox">
    <!-- Input oculto -->
    <input class="custom-radio-checkbox__input" type="checkbox" name="genero" value="hombre">
    <!-- Imagen en sustitucion -->
    <span class="custom-radio-checkbox__show custom-radio-checkbox__show--checkbox"></span>
    <!-- Texto -->
    <span class="custom-radio-checkbox__text">Acepto las condiciones de uso y privacidad</span>
</label>

Mostramos una imagen de fondo dentro del span y ocultamos el checkbox original.

/* Centra el input personalizado con el texto */
.custom-radio-checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-family: arial;
}

/* Modificador para dar la imagen de checkbox */
.custom-radio-checkbox__show--checkbox {
    background-image: url(checkbox-uncheck.png);
}

/* Oculta input original */
.custom-radio-checkbox > .custom-radio-checkbox__input {
    display: none;
}

/* Radio personalizado usando <span> */
.custom-radio-checkbox > .custom-radio-checkbox__show {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: .5rem;
    background-size: cover;
}

/* Cambia el checkbox personalizado cuando es pulsado */
.custom-radio-checkbox > .custom-radio-checkbox__input:checked + .custom-radio-checkbox__show--checkbox {
    background-image: url(checkbox-check.png);
}

La imagen sin pulsar sería la siguiente.

Checkbox sin pulsar

Y pulsado sería así.

Checkbox pulsado

Todo cohesionado en un componente

HTML

<!-- Radios -->
<p>
    <label class="custom-radio-checkbox">
        <!-- Input oculto -->
        <input class="custom-radio-checkbox__input" type="radio" name="genero" value="mujer" checked>
        <!-- Imagen en sustitucion -->
        <span class="custom-radio-checkbox__show custom-radio-checkbox__show--radio"></span>
        <!-- Texto -->
        <span class="custom-radio-checkbox__text">Mujer</span>
    </label>
</p>
<p>
    <label class="custom-radio-checkbox">
        <!-- Input oculto -->
        <input class="custom-radio-checkbox__input" type="radio" name="genero" value="hombre">
        <!-- Imagen en sustitucion -->
        <span class="custom-radio-checkbox__show custom-radio-checkbox__show--radio"></span>
        <!-- Texto -->
        <span class="custom-radio-checkbox__text">Hombre</span>
    </label>
</p>
<!-- End Radios -->

<!-- Checkbox -->
<p>
    <label class="custom-radio-checkbox">
        <!-- Input oculto -->
        <input class="custom-radio-checkbox__input" type="checkbox" name="genero" value="hombre">
        <!-- Imagen en sustitucion -->
        <span class="custom-radio-checkbox__show custom-radio-checkbox__show--checkbox"></span>
        <!-- Texto -->
        <span class="custom-radio-checkbox__text">Acepto las condiciones de uso y privacidad</span>
    </label>
</p>
<!-- End Checkbox -->

CSS

/* Centra el input personalizado con el texto */
.custom-radio-checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-family: arial;
}

/* Modificador para dar la imagen de checkbox */
.custom-radio-checkbox__show--checkbox {
    background-image: url(checkbox-uncheck.png);
}

/* Modificador para dar la imagen de radio */
.custom-radio-checkbox__show--radio {
    background-image: url(radio-uncheck.png);
}

/* Oculta input original */
.custom-radio-checkbox > .custom-radio-checkbox__input {
    display: none;
}

/* Radio personalizado usando <span> */
.custom-radio-checkbox > .custom-radio-checkbox__show {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: .5rem;
    background-size: cover;
}

/* Cambia el checkbox personalizado cuando es pulsado */
.custom-radio-checkbox > .custom-radio-checkbox__input:checked + .custom-radio-checkbox__show--checkbox {
    background-image: url(checkbox-check.png);
}

/* Cambia el radio personalizado cuando es pulsado */
.custom-radio-checkbox > .custom-radio-checkbox__input:checked + .custom-radio-checkbox__show--radio {
    background-image: url(radio-check.png);
}

SASS

.custom-radio-checkbox
  display: inline-flex
  align-items: center
  cursor: pointer
  font-family: arial
  &__show--checkbox
    background-image: url(checkbox-uncheck.png)
  &__show--radio
    background-image: url(radio-uncheck.png)
  &__input
      display: none
  &__show
    display: inline-block
    width: 15px
    height: 15px
    margin-right: .5rem
    background-size: cover
  &__input:checked + &__show--checkbox
    background-image: url(checkbox-check.png)
  &__show--radio:checked + &__show--radio
    background-image: url(radio-check.png)

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario

Tal vez también te interese...