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

Gradientes sobre el texto

Gradientes sobre el texto

Árbol arcoíris creciente

Árbol arcoíris creciente

Loader espiral con CSS

Loader espiral con CSS

Algunos artículos que te pueden interesar

Transformando un botón de un estado a otro con CSS

Transformando un botón de un estado a otro con CSS

Se explica cómo transformar un botón con CSS y JavaScript.

Andrés Cruz 02-08-2016

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

Como mostrar contenido en columnas expandibles con solo CSS

Como mostrar contenido en columnas expandibles con solo CSS

En este artículo veremos una forma de mostrar contenido a través de columnas expansibles.

Andrés Cruz 21-07-2014