DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
26-01-2015

El selector de la pseudo-class :checked representa (permite seleccionar) a cualquier elemento HTML radio (<input type="radio">), checkbox (<input type="checkbox">) u option (<option> en un <select>): Fuente.

En otras palabras, podemos obtener cualquiera de los elementos HTML anteriormente citados que se encuentren "encendidos" con esta pseudo-class:

<input type = "checkbox" checked>
<input type = "radio" checked>
<option value="1" selected>option</option>

Una vez obtenidos los elementos, es posible definir un nuevo estilo en los mismos, sus hijos, elementos HTML vecinos, etc.

El atributo for para activar elementos HTML

Existe un atributo que puede ser empleado en conjunto con los <label> llamado for que permite activar los elementos HTML checkboxs y radios con tan solo aplicar un clic en el label sin la necesidad de emplear JavaScript.

Realiza clics sobre los siguientes labels:

Arya Stark
Bran Stark
Daenerys Targaryen
Eddard Stark
Jaime Lannister
Tyrion Lannister
Jon Snow
Petyr Baelish
Sansa Stark
Gusano Gris
Catelyn Tully

Uso del atributo for en CSS

Para habilitar esta función solo debemos colocar el mismo valor del atributo id de los checkboxs y/o radios en el for del label.

Ejemplo del atributo for en CSS

			<input id="arya-stark" type="checkbox" >
			<label for="arya-stark"/>Arya Stark</label>

Dando estilo a los elementos encendidos mediante la pseudo-class :checked

Usando como base el HTML presentado anteriormente, es posible seleccionar los input que se encuentren encendidos con la siguiente selector:

input:checked{}

O el label adyacente al input "encendido":

input:checked + label{}

Dando estilo a los checkboxs y radios encendidos mediante la pseudo-class :checked

Aplicar una regla de estilo al label cuando el input de tipo checkbox se encuentra "encendido" (<input type = "checkbox" checked >) es tan sencillo como aplicar el siguiente selector:

	 input:checked + label{ color: #FFFFFF;}

Y en el caso de los elementos radios:

	input:checked + label{ color: #FFFFFF;}

Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Css3 Spinners

Css3 Spinners

Colourlovers: Paletas de colores lista para el diseño web

Colourlovers: Paletas de colores lista para el diseño web

Ley del cuadrado inverso con CSS

Ley del cuadrado inverso con CSS

Algunos artículos que te pueden interesar

Creando un fondo vivo con CSS

Creando un fondo vivo con CSS

En esta entrada veremos cómo crear un fondo vivo con CSS para ser aplicados en una página web.

Andrés Cruz 03-08-2015

Botones con fondo corredizo en CSS

Botones con fondo corredizo en CSS

En esta entrada veremos como crear unos fantásticos botones con fondo corredizo.

Andrés Cruz 21-04-2015

Guía rápida sobre el background en CSS (parte 1)

Guía rápida sobre el background en CSS (parte 1)

Esta propiedad es la forma abreviada para establecer las demás propiedades relacionadas incluyendo aquellas relacionadas con el color e imagenes de fondo de un elemento; es decir, aquellas cuyo prefijo es background-.

Andrés Cruz 19-02-2014