Cómo seleccionar con CSS un elemento HTML que tiene dos atributos determinados a la vez

La respuesta de Damián me ha ayudado mucho porque ha resuelto mi pregunta original (el input con el disabled y type=text) de una manera que no sabía que se podía resolver. Pero además quiero añadir otra solución más genérica que sirve para cualquier tipo de atributo.

Para crear un selector CSS que seleccione elementos que tengan dos atributos específicos A LA VEZ en la misma etiqueta, se deben concatenar los selectores de atributos, poniendo ambos seguidos sin espacios entre ellos.

input[atributo1="valor1"][atributo2="valor2"] {
    /* los estilos del input */
}

En el código CSS anterior seleccionamos elementos INPUT que tienen atributo1 y atributo2 como nombres de los atributos, y valor1 y valor2 son los valores específicos de esos atributos. Este selector nos dará a cualquier elemento <input> que tenga ambos atributos atributo1 y atributo2 con los valores especificados valor1 y valor2, respectivamente.

Si no nos importa que el selector mire los valores de los atributos y funcione con cualquier valor se puede hacer así:

input[atributo1][atributo2] {
    /* los estilos CSS que quieras poner */
}

He creado el código de una página para explicar esto con algunos ejemplos, donde se incluye la alternativa de Damian con el :disabled para el caso del input (mi pregunta original) y un ejemplo sobre etiquetas img que puedan tener más de un atributo a la vez.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>seleccion de atributos</title>
  <style>
    input[type=text] {
      background-color: aquamarine;
    }
    input[type=text]:disabled {
      background-color: #ddd;
    }

    img[src][alt] {
      border: 2px solid rebeccapurple;
    }
    img[src][alt="foo"] {
      border: 2px solid orange;
    }
  </style>
</head>
<body>

  <input value="sin type=text">
  <input type="text" value="normal">
  <input type="text" value="disabled" disabled>
  <input type="password" value="password">
  
  <img src="https://placehold.co/60x40">
  <img src="https://placehold.co/60x40" alt="algo">
  <img src="https://placehold.co/60x40" alt="foo">
</body>
</html>

Marcos

157 1 14 11

Si queres agrear estilo a un elemento con type="text" y "disabled" podes intentar lo siguiente:

input[type="text"]:disabled {
    background-color: #ccc
}

Damian

5 1

Muchas gracias Damian, tu respuesta me ha ayudado un montón porque no sabía que podía usar el :disabled para esta cuestión. He investigado un poco más y he encontrado otros datos que publicaré como respuesta.

Cómo seleccionar con CSS un elemento HTML que tiene dos atributos determinados a la vez

Respuestas