Breaking

Post Top Ad

Your Ad Spot

miƩrcoles, 13 de noviembre de 2019

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>
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>
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.

No hay comentarios.:

Publicar un comentario

Post Top Ad

Your Ad Spot

PƔginas