Selectores para formularios CSS

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;}

<form class="test">
    <div>
        <label for=" nombre ">Name:</label>
        <input type="text" id="nombre">
    </div>
    <div>
        <label for="email">E-mail:</label>
        <input type="email" id="email" disabled="disabled">
    </div>
    <div>
        <label for="msg">Mensaje:</label>
        <textarea id="msg"></textarea>
    </div>
</form>

Name:

E-mail:

Mensaje:

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;}

<form class="test">
  <div>
    <label for="elnombre">Nombre:</label>
    <input type="text" id="elnombre">
  </div>

  <div>
    <label for="elmsg">Mensaje:</label>
    <textarea id="elmsg"></textarea>
  </div>
</form>

Nombre:

Mensaje:

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

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}

<form class="test-invalid">
<input type="number" min="5" max="10" value="12">
</form>

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}

<form class="test-invalid">
<input type="text" pattern="\w{5,10}" value="unpocodetodo">
</form>

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.

<form class="test-required">
<input type="text" minlength="8" required=""> <label></label>
</form>

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.