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

Botón flotante

Botón flotante

Gradientes sobre el texto

Gradientes sobre el texto

Loader variados con CSS

Loader variados con CSS

Algunos artículos que te pueden interesar

¿Cómo anclar el Footer a la parte inferior de la pantalla con solo CSS?

¿Cómo anclar el Footer a la parte inferior de la pantalla con solo CSS?

En esta nueva entrega, veremos ¿Cómo anclar el Footer a la parte inferior de la pantalla con solo CSS?

Andrés Cruz 14-08-2014

Múltiples fondos animados con CSS

Múltiples fondos animados con CSS

En este artículo explicaremos en base a un ejemplo cómo crear múltiples fondos anidados animándolos con un poco de CSS3.

Andrés Cruz 06-01-2014

La propiedad mix-blend-mode en CSS

La propiedad mix-blend-mode en CSS

La propiedad mix-blend-mode especifica cómo un elemento debe mezclarse con el elemento que está debajo de ella.

Andrés Cruz 04-05-2015