> Faqs > ¿Qué selector CSS usar para seleccionar un campo input que tiene el atributo name="search"?

¿Qué selector CSS usar para seleccionar un campo input que tiene el atributo name="search"?

Tengo un campo <input> con name="search".

<input name="search">

Quiero poder seleccionarlo con CSS, pero solamente ese campo input de formulario, ningún otro.

¿Qué selector usar para seleccionar por el valor de atributo "name"?

Respuestas

Tienes que usar el selector por atributo, que permite indicar el nombre del atributo y el valor de atributo que estás buscando.

Tu ejemplo sería más o menos así:

[name="coursesearched"] {
    border: 3px solid red;
}

Pero si lo que quieres es seleccionar un campo <input> quizás tengas mejor que usar el selector por etiqueta que tiene a su vez un atributo con un valor dado.

input[name="coursesearched"] {
    border: 3px solid red;
}

Pero si tienes varios campos <input> en la página con el mismo atributo name, te los seleccionaría a todos. No sería demasiado habitual, pero igual tienes que hacer el selector desde otro elemento de la página.

nav.headernav input[name="coursesearched"] {
    border: 3px solid red;
}

Eso se supone que tienes una etiqueta <nav> con la clase "headernav" y que dentro de ella tienes el campo input que deseas seleccionar por el atributo name.

El selector de atributo es bastante potente y encontrarás más posibilidades en estos artículos:

Miguel Angel
3265 144 213 17

Con el selector de atruibuto que funciona así:

input[name="search"] {
  margin-bottom: 1rem;
  border: red;
}
Juanjo
248 8 18 5