Cambiar el ancho de todos los elementos que están Seleccione descendiente de un div id = “contenido”

StackOverflow https://stackoverflow.com/questions/1065681

  •  21-08-2019
  •  | 
  •  

Pregunta

Estoy tratando de estilo de todos los elementos que son <select> un descendiente de un <div>. Podría haber un puesto una clase sobre ellos, pero yo estaba tratando de ser inteligente: -)

Creo que no funciona en IE6, pero funciona en IE7 etc?

¿Cómo lo haces

Esta es una de mis selecciona (no tiene ninguna clase o id), pero todos ellos son descendientes de un div cuyo ID es "contenido"

<div id="content">
    <select >
        <option></option>
    </select>
</div>

¿Alguna idea?

¿Fue útil?

Solución

Si desea cualquiera SELECT que es un descendiente de un elemento con id = "content":

#content select { ... }

Si desea cualquiera SELECT que es un descendiente directo de un elemento con id = "content":

#content > select { ... }

Si desea limitarlo a sólo elementos div con id = "content":

div#content select { ... }

El segundo puede que no funcione en algunos navegadores antiguos, pero los demás debería funcionar incluso en un antiguo navegador con tal de que tenga algún soporte CSS en absoluto, como Netscape 4.

Otros consejos

Esto debería funcionar en todos los navegadores:

#content select {
   // Styles for selects inside the div with id `content'
}
.myDiv select {
  font-family:verdana;
}

<div class="myDiv">
  <p><select>...</select></p>
  <p><select>...</select></p>
</div>
div#content > select {
}
.content select {

              css here

}

Creo que esto es cómo se puede lograr esto. Donde el "contenido" es la clase de su div. Esto dará formato a todas selecciona dentro de un div que tiene la clase de "contenido".

Lo mejor de la suerte!

La solución de Nick sólo se pone descendientes directos, por lo que no obtendría una selección en un formulario en el div. Esto hará que ellos no importa cuántos otros elementos profunda son:

#content select { width: 100px }

Si sólo se desea conseguir, por ejemplo, las entradas de texto que pueden hacer esto:

#content select[type=text] { width: 100px }

y no se olvide que las entradas de contraseñas son diferentes a las entradas de texto!

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top