marcador unido a la entrada

Question

¿Hay alguna manera en el CSS para seleccionar label s unidos a input campos (a través del atributo for) que tiene establecido el atributo required? Algo así como:

label:input[required] { 
    ... 
} 

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

El closest answer encontré no utiliza for atributo del elemento label, pero requeriría que el label ser directamente adyacente a la entrada en el código HTML.

Answer 1

¿Qué tal CSS 2 Attribute Selectors 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 comprobar this a cabo.

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 realmente se puede lograr a través de CSS en la forma en que el PO quiere. CSS simplemente no funciona de esa manera.

Un mejor enfoque en mi opinión es dar un paso atrás y ver el panorama general. Tiene un formulario donde algunos campos son obligatorios y otros no. Es un buen enfoque 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 una serie 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 altura de la cadena que desee. Si el formulario tiene la clase 'requerida', todo lo que contiene se etiquetará según sea necesario. Hay menos lugares para hacer cambios, si decidiste que la clase 'requerida' debería llamarse otra cosa. Y, en general, este enfoque también lo ayuda a organizar mejor sus formularios. No debe mezclar los campos obligatorios y opcionales.

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

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