• Josetxu.com
  • Perfil
  • Portafolio
  • Iconos
  • Demos
  • Blog
Blog · Josetxu.com

Aplicar estilos CSS a campos [radio] y [checkbox]

Publicada en 8 ago 2018 de Josetxu

Un problema típico de los formularios es dar estilos personalizados a los elementos input de tipo radio y checkbox. Aunque se les pueden aplicar algunas propiedades de CSS como width, height o box-shadow, lo cierto es que poco más se puede hacer con estos elementos.

Pero ojo, en este artículo no vamos a ver como dar estilos a los propios elementos input…

EStilos Input Radio y Checkbox

Los estilos personalizados se los vamos a dar a los pseudo-elementos :after y :before del label asociado a cada input, dependiendo de si este tiene la propiedad checked (si está checkeado) o no.

¿Y por que no damos estilos directamente a los pseudo-elementos de los input…?
Sería una opción más limpia, pero algunos navegadores (Firefox & Edge) no reconocen los pseudo-elementos :after y :before en los input, así que, tenemos que usar los pseudo-elementos de los label asociados al input , de esta manera aprovecharemos la “zona de selección” del label como podremos ver más adelante.

HTML

La estructura HTML es muy importante, ya que después con CSS podremos dar estilos a los elementos dependiendo de como estén colocados.

 

Si ponemos el input y a continuación el label podemos crear un estilo del tipo input:checked+label que solo se aplicará cuando el input esté checkeado.

XHTML
1
<input type="checkbox" id="check1" ><label for="check1">Check me!</label>

Con los input de tipo radio igual, primero ponemos el input y después el label :

XHTML
1
2
<input type="radio" id="radio1"><label for="radio1">Radio 1</label>
<input type="radio" id="radio2"><label for="radio2">Radio 2</label>


Manteniendo esa estructura podemos hacer lo que queramos: flotar elementos, rodearlos con un contenedor, meterlos en una lista, ocultarlos…

CSS

Teniendo en cuenta la anterior estructura HTML para los input y sus label podemos crear los siguientes estilos CSS:

CSS
1
2
3
input[type="checkbox"] + label {
  color: red;
}

Con esta regla de CSS decimos que cualquier label que esté inmediatamente detrás de un input de tipo checkbox tendrá el color del texto rojo.

 

 

Pseudo-clase :checked

 

Y con el selector de la pseudo-clase :checked podemos modificar los estilos del label cuando el input está checkeado. Solo hay que añadir el selector :checked al input para, por ejemplo, cambiar el color del texto del label :

CSS
1
2
3
input[type="checkbox"]:checked + label {
  color: blue;
}

Con esta regla de CSS decimos que cualquier label que esté inmediatamente detrás de un input de tipo checkbox que esté checkeado tendrá el color del texto azul.

 

En este punto podemos dar estilos a los label de los checkbox checkeados, a sus pseudo-elementos o a cualquier otro elemento que queramos poner dentro o a continuación de los label como pueden ser span , img , etc… mientras se mantengan detrás del input checkeado.

Hay que tener en cuenta que la idea de usar el label es por su propiedad de “zona de selección”  para el input. Al asociar los label a sus input mediante el atributo for hacemos que cualquier elemento dentro del label sea clickable y haga que se marque o se desmarque el checkbox o el radio input asociado a ese label.

 

 

Pseudo-elementos :before y :after

 

Con los selectores de los pseudo-elementos :before y :after del label asociado a cada input podemos crear nuestro checkbox personalizado. Olvidamos los estilos anteriores y empezamos de cero.

 

:before

Con el :before creamos el recuadro del checkbox, primero para cuando no esta checkeado y después añadimos un color de borde diferente para cuando si lo está:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
input[type="checkbox"] + label:before {
content: "";
width: 26px;
height: 26px;
float: left;
margin: 0.5em 0.5em 0 0
border: 2px solid #ccc;
background: #fff;
}
input[type="checkbox"]:checked + label:before {
border-color: #0fbf12;
}

:after

Con el :after creamos la marca del checkbox, pero solo para cuando esté checkeado, lo haremos, como ya hemos visto, con el selector :checked :

CSS
1
2
3
4
5
6
7
8
9
10
11
12
input[type="checkbox"]:checked + label:after {
    content: "";
    width: 12px;
    height: 6px;
    border: 4px solid #0fbf12;
    float: left;
    margin-left: -1.95em;
    border-right: 0;
    border-top: 0;
    margin-top: 1em;
    transform: rotate(-55deg);
}

Ajustando la propiedad margin-left podemos tapar el input, pero también podemos ocultarlo y no influirá a la hora de checkearlo.

CSS
1
2
3
input[type="checkbox"] {
display: none;
}

Solo queda ajustar el texto para que cuadre con el checkbox , y ya que estamos pues creamos dos estilos, sin checkear (gris) y checkeado (verde):

CSS
1
2
3
4
5
6
7
8
input[type="checkbox"] + label {
    font-weight: bold;
    line-height: 3em;
    color: #ccc;
}
input[type="checkbox"]:checked + label {
    color: #0fbf12;
}

Para los input de tipo radio sería exactamente igual, lo único que hay que tener en cuenta es que suelen ser redondos…
Esto se soluciona fácilmente añadiendo la propiedad border-radius al pseudoelemento :before :

CSS
1
2
3
4
5
6
7
8
9
10
input[type="radio"] + label:before {
    content: "";
    width: 26px;
    height: 26px;
    float: left;
    margin: 0.5em 0.5em 0 0
    border: 2px solid #ccc;
    background: #fff;
    border-radius: 100%;
}


 

Y la marca de checkeado también será redonda, por lo que el pseudoelemento :after quedaría así:

CSS
1
2
3
4
5
6
7
8
9
10
input[type="radio"]:checked + label:after {
    content: "";
    width: 0;
    height: 0;
    border: 8px solid #0fbf12;
    float: left;
    margin-left: -2.15em;
    margin-top: 1em;
    border-radius: 100%;
}


Obviamente podemos añadir estilos para los estados :hover y :disabled aunque solo recomiendo el último ya que el :hover puede resultar confuso. Al checkearlo o des-checkearlo (como el puntero está sobre él) se activa el :hover y el usuario ya no sabe si está checkeado o no.

Demo

Dejo por aquí una demo donde se incluyen estilos para los input de tipo radio y checkbox. También hay estilos para el estado :disabled :

Ver Styling Radio & Checkbox Input Fields por Josetxu (@josetxu) en CodePen.13351

Como siempre por aqui puedes ver la demo mas grande:

ver demo grande

Publicado en: CSS, CSS3, HTML | Etiquetas: Formularios |
« Captcha en PHP
» Iconos con CSS

Artículos Relacionados

  • Flip Cards o Tarjetas Giratorias con CSS3Flip Cards o Tarjetas Giratorias con CSS3
  • Iconos con CSSIconos con CSS
  • Comentar códigoComentar código
  • Efecto “Before / After” Responsive Efecto “Before / After” Responsive
  • Estructura básica de CSSEstructura básica de CSS
josetxu Josetxu López

Diseñador y programador web multidisciplinar y autodidacta.
Investigo las posibilidades que nos ofrece la tecnología aprendiendo algo nuevo cada día. La curiosidad y la paciencia me han enseñado casi todo lo que sé...

Buscar

Categorías

  • CSS (7)
  • CSS3 (7)
  • HTML (4)
  • HTML5 (3)
  • Javascript (8)
  • JQuery (1)
  • PHP (6)

Etiquetas

Animación Audio Básico Captcha Clases Constructores Formularios Funciones Iconos Imagen JSON Métodos Responsive

Recientes

Crear pestañas de contenido o 'tabs' fácilmente con javascript
Crear pestañas de contenido o 'tabs' fácilmente con javascript
Funciones básicas en PHP: [include()] y [require()]
Funciones básicas en PHP: [include()] y [require()]
Iconos con CSS
Iconos con CSS
Captcha en PHP
Captcha en PHP

Utilidades

Color Picker w3c Selector de color Google Fonts google Fuentes de Google Can I use @Fyrd Soporte por navegadores Gimp gimp Manipulación de imágenes Notepad++ notepad++ Editor de código W3C Validator w3c Validador de código Highcharts highchartsGráficas en Javascript

Aviso

La información contenida en este blog es solo orientativa . No soy profesor, solo un tio curioso que quiere compartir lo aprendido durante estos años.

CyberChimps WordPress Themes

josetxu.comJosetxu.com Perfil | Portafolio | Iconos | Demos | Blog 2000 - 2020 © josetxu.com
▲