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
-
Puedes mostrarnos que has intentado hasta el momento para poder tener una plantilla para ayudarte.– Santiago RoldanCommented 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– Bender PaisaCommented el 27 nov. 2017 a las 17:11
Añade un comentario
|
3 respuestas
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="">
-
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
-
Puedes hacerlo con CSS sin necesidad de usar Javascript como muestro a continuación:
Input:Focus {
Background-color: yellow;
}
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>