Selectores para formulares

facebook-svg gplus-svg twitter-svg

La pseudo clase :disabled e :enabled

La pseudo clase :disabled se utiliza para seleccionar y dar estilo a los elementos de formulario <form> deshabilitados o sea: que tienen un atributo disabled="true".

Elementos de formulario que pueden ser deshabilitados:> <input>, <button>, <select>, <textarea>.


.test *:disabled{background:#efefef;}
.test *:enabled{border:1px solid #6ab150;}


Para deshabilitar un elemento utilizando JavaScript podemos escribir:


email.disabled = true

Los elementos de formulario que pueden ser deshabilitados tienen también un estado habilitado :enabled y son todos aquellos que no tienen in atributo disabled. Podemos rehabilitar un elemento deshabilitado utilizando JavaScript de esta manera:


email.disabled = false

La pseudo clase :focus

La pseudo clase :focus se utiliza para seleccionar y dar estilo a los elementos HTML enfocados al hacer clic en el elemento o bien al utilizar el tabulador. Generalmente se utiliza para elementos de formulario como <input>, <button>, <select> y <textarea>. También se utiliza para enlaces <a> enfocados y para elementos <area>. Asimismo puede ser enfocado cualquier otro elemento que tiene un atributo tabindex o contenteditable.

.test-tabindex *:focus{outline:3px solid red;}

Es posible utilizar JavaScript para enfocar un elemento, utilizando el método focus() :


elemento.focus(true);

Podemos utilizar el mismo método para quitar el :focus de un elemento.


elemento.focus(false);

Las pseudo clases :invalid y :out-of-range

La pseudo clase :invalid se utiliza para seleccionar y dar estilo a los elementos <input> cuyo valor es invalido según el tipo del <input> utilizado. Por ejemplo un input type="email" cuyo valor no es una dirección de email válida; o un input type="number" cuyo valor contiene caracteres que no son dígitos.

También selecciona elementos cuyo valor está fuera de los limites establecidos. Por ejemplo un input type="number" cuyo valor es más pequeño que el valor del atributo min o más grande que el valor del atributo max.

.test-invalid input:invalid{color:white; background:hotpink}

En este caso también podemos utilizar la pseudo clase :out-of-range o sea: fuera de los límites.

Otro ejemplo sería un input type="text" cuyo valor no coincide con el patrón (pattern) utilizado. En el siguiente ejemplo según el patrón utilizado, el valor tiene que ser alfanumérico y entre 5 y 10 caracteres.

.test-invalid input:invalid{color:white; background:hotpink}

También en este caso podemos utilizar la pseudo clase :out-of-range.

Las pseudo clases :valid e :in-range

La pseudo clase :valid se utiliza para seleccionar y dar estilo a los elementos <input> cuyo valor es valido según el tipo del <input> utilizado. La pseudo clase :in-range se utiliza para seleccionar y dar estilo a los elementos <input> cuyo valor no está fuera de los limites establecidos.

Las pseudo clases :required y :optional

La pseudo clase :required se utiliza para seleccionar y dar estilo a los elementos de formulario obligatorios o requeridos. En HTML los elementos de formulario requeridos llevan el atributo required.


Como que los elementos <input> no aceptan pseudo elementos como ::before y ::after he necesitado añadir una etiqueta <label> después del <input>.

.test-required input:required + label::after{content:'*'; color:red;}

La pseudo clase :optional es todo lo contrario: selecciona y da estilo a los elementos de formulario opcionales o sea: que no llevan el atributo required.

Las pseudo clases :read-write y :read-only

La pseudo clase :read-write se utiliza para seleccionar y dar estilo a los elementos editables, o sea los que llevan el atributo contenteditable y los elementos <input> y <textarea> que no son deshabilitados.

Por lo contrario la pseudo clase :read-only selecciona y da estilo a todos los elementos que no son editables por el usuario.