Quiero que mi tipo de entrada = botón cambie de color solo mientras está presionado. Por ejemplo, si tengo un botón blanco, quiero que se vuelva verde solo mientras estoy presionado, y cuando ya no esté presionado desearía que vuelva a ser blanco. ¿Cómo puedo hacer esto en HTML y Javascript? (Lo siento por mi mala Inglés y gracias)¿El botón de tipo de entrada cambia de color mientras se presiona?
el selector CSS para este estado se llama :active
Así que si lo hace:
input.btn:active { background:green }
que debería funcionar.
Ver demo
BÁSICA HTML + JavaSctipt:
<input type="button" style="background-color:white" value="Click Me" onmousedown="this.style.background='green'" onmouseup="this.style.background='white'" />
Demostración: http://jsfiddle.net/bqjzq/
¿Por qué harías javascript, esp. ¿JavaScript en línea para algo como esto si puedes hacerlo con CSS? –
Vea mis comentarios a la solución de Piotr a continuación. Pure CSS para el botón de entrada no funciona en IE. Y JS en línea es solo para el ejemplo, por supuesto, si se necesita una función más compleja, debería ser una función. De todos modos, pure CSS trabajó para el elemento
Quiero encontrar una solución en la que también funcione si sueltas el botón del mouse fuera del objetivo –
Para mí sólo funciona con:
<style>
input:active{ background-color:green}
</style>
Otra opción es especulación ify al pasar el mouse, solo para botones:
<style>
input[type=button]:hover{ background-color: #46000D}
<style>
Esto solo funciona con el mouse hacia abajo. – xdazz
Parece que no funciona en IE? –
@Trekstuff que IE? Para elementos distintos de a, solo se admite en IE desde la versión 8.0: https://developer.mozilla.org/en-US/docs/CSS/:active. –