4

Resulta que quiero colorear o ponerle color de fondo a unos input dependiendo el contenido, no se si esto se pueda hacer pueda hacer.

El codigo que tengo es el siguiente:

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #31aee7;
  font-size: 3vw;
  font-weight: bold;
  color: white;
}
input{
  border: 0;
  border-radius: 5px;
  width: 60px;
  font-weight: bold;
  font-size: 1em;
  text-align: center;  
}
table, th{
  border: 2px solid;
  border-color: white;
  border-radius: 5px;
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="utf-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <link rel="stylesheet" href="estilo.css">
    </head>
    <body>
           <table class="tabla">
               <tr bgcolor="#085584ff">
                   <th width="100">Placa</th>
                   <th><input type="text" value="F"></th>
                   <th><input type="text" value="1"></th>
               </tr>
           </table>
    </body>
</html>

Resulta que los input que contengan 1 deben ponerse de color de fondo del input verde y los que tengan F de rojo y no se como hacerlo.

Agradezco mucho la ayuda que me puedan dar.

1 respuesta 1

4

Basta con que desde CSS elijas al input por el atributo value que cada uno posee, del modo siguiente

La estructura que sigue es:

etiqueta[atributo="valor"]

Usando un selector de atributo

      input[value="F"] {
        background: tomato;
      }
      input[value="1"] {
        background: red;
      }

Referencias

2
  • @Aprendis y si quiero que cambie cuando cambie el valor???, como lo puedo hacer, por cierto funciono perfecto. el 20 dic. 2019 a las 18:50
  • 1
    Eso es un tema de dinamismo que se tendría que manejar con JS para leer el input asignándolo a una variable y verificar la propiedad value la cual si contiene un valor en especíco entonces le das un color y si no otro
    – BetaM
    el 20 dic. 2019 a las 18:54

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.