1

Tengo un input text con un background transparente y lo que quiero hacer es que cambie su background al posicionarme en el, algo así como se ve en la imagen pero con JQuery o JS introducir la descripción de la imagen aquí

2
  • Puedes mostrarnos que has intentado hasta el momento para poder tener una plantilla para ayudarte. Commented el 27 nov. 2017 a las 17:11
  • Debes mostrar el código que has intentado usar para poderte ayudar, recuerda leer Cómo preguntar Commented el 27 nov. 2017 a las 17:11

3 respuestas 3

5

Espero esto sea lo que buscas

En este caso usamos jquery al activar el evento focus que al elemento se le cambie la propiedad background y al activar el evento blur que vuelva a su estatus anterior.

$(".input").focus(function(){
  $(this).css({"background":"rgb(82, 179, 126)"})
})
$(".input").blur(function(){
  $(this).css({"background":"transparent"})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input placeholder="background con jquery" class="input" type="text" name="" value="">

En este caso solo hay que usar la propiedad de css :focus que se activa cuando el input esta activo

input:focus {
  background: rgb(168, 168, 168);
}
<input placeholder="input cambio de color" type="text" name="" value="">

4
  • De hecho el hover, lo tengo con Js y quería que al darle click se cambiara al color del hover pero con el Focus en CSS me funcionó bien y lo dejaré así por ahora si me sirvió tu primer respuesta Commented el 27 nov. 2017 a las 17:32
  • excelente especifica un poquito mas para poder darte la solución acorde al caso saludos Commented el 27 nov. 2017 a las 17:41
  • listo ya lo acomode a tu caso espero ahora si te ayude! y recuerda especificar un poco mejor que es lo que necesitas Commented el 27 nov. 2017 a las 17:44
  • Claro, y si ya quedó bien! Commented el 27 nov. 2017 a las 17:47
2

Puedes hacerlo con CSS sin necesidad de usar Javascript como muestro a continuación:

Input:Focus {
     Background-color: yellow;
}
1
  • Muy bien, lo intenté ya y funciono Commented el 27 nov. 2017 a las 17:32
0

Puedes realizarlo con JavaScript con estilos:

function Color(ele){
  if ($(ele).val() === "") {
    $(ele).css("background-color", "");
  }
  else{
    $(ele).css("background-color", "pink");
  }
}
<body>
  <input type="text" id="ejemplo" name="ejemplo"  onchange="Color(this)"/>
</body>

Tu Respuesta

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

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