seleccionar - Selector de CSS para la etiqueta vinculada a la entrada

selector padre css

Question

¿Hay alguna forma en CSS para seleccionar la label s vinculada a input campos de input (a través del atributo for ) con el conjunto de atributos required ? Algo como:

label:input[required] {
  ...
}

Actualmente, estoy agregando class="required" a las etiquetas y entradas para el estilo. Ahora tengo el atributo HTML5 required="required" en los campos de entrada requeridos. Sería bueno eliminar los atributos de clase redundantes.

La respuesta más cercana que encontré no usa el elemento for la label , pero requeriría que la label sea ​​directamente adyacente a la entrada en el HTML.

Answer 1

¿Qué hay de los selectores de atributos CSS 2? Es bastante compatible entre los navegadores.

Ejemplo:

<style>
label[required=required]
{
color: blue;
}
</style>
<label required="required" for="one">Label:</label><input name="one" id="one" />

También mira this .

Answer 2

Esta solución funciona en la mayoría de los navegadores modernos:

<style>

label > input[required="required"] {
    background: red; 
}

</style>
<label for="myField"><input required="required" id="myField" /></label>

Answer 3

No creo que esto pueda lograrse realmente a través de CSS de la manera que el OP quiere. CSS simplemente no funciona de esa manera.

Un mejor enfoque en mi opinión es dar un paso atrás y mirar el panorama general. Tiene un formulario donde se requieren algunos campos y otros no. Es un buen método dar al usuario todos los campos requeridos primero, o agrupar los campos requeridos, y mantenerlos claramente separados de los campos opcionales.

Puede crear una estructura como

<form>
     <ul class="required_fields">
       <li>
          <label>username</label>
          <input />
       </li>
       <li>
          <label>email</label>
          <input />
       </li>
     </ul
     <ul class="optional_fields">
          ...
     </ul>
 </form>

/* CSS */
.required_fields label {font-weight: bold} 
.required_fields label:after { content: "*"; color: red } /*more styles for labels*/

Hay un número de beneficios para este enfoque. Puede agregar y eliminar elementos del grupo ''requerido'' fácilmente sin tener que modificar cada uno individualmente. Puede asignar la clase ''requerida'' a la cadena que desee. Si el formulario tuviera la clase ''requerida'', todo lo que contenga se etiquetará según sea necesario. Hay menos lugares para realizar cambios, si decide que la clase ''requerida'' debería llamarse otra cosa. Y, en general, este enfoque también le ayuda a organizar mejor sus formularios. No debe mezclar campos obligatorios y opcionales.

Podría llevar esto un paso más allá y tener algún javascript que también inyectará el atributo requerido en los campos de entrada.

$(".required_fields input").each(function(){
   this.setAttribute(''required'', ''required'');
});