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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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