Selectores para formularios
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);
El pseudo selector :focus-within
El pseudo selector :focus-within
se utiliza para seleccionar un elemento ( por ejemplo un formulario ) que tiene un elemento hijo focusado. Esto es muy inusual ya que en CSS no existe ningún otro selector que nos permita seleccionar al elemento padre en base al elemento hijo
See the Pen test:focus-within*** by Gabi (@enxaneta) on CodePen.
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.