Voglio il mio tipo di input = per cambiare colore solo quando premuto. Ad esempio, se ho un pulsante bianco, voglio che diventi verde solo quando premuto, e quando non è più premuto desidero che ritorni bianco. Come posso farlo in HTML e Javascript? (Dispiace per il mio cattivo inglese e grazie)Il pulsante del tipo di input cambia colore mentre viene premuto?
il selettore CSS per questo stato è chiamato :active
Quindi, se si fa:
input.btn:active { background:green }
che dovrebbe funzionare.
Vedi demo
Plain vanilla HTML + JavaSctipt:
<input type="button" style="background-color:white" value="Click Me" onmousedown="this.style.background='green'" onmouseup="this.style.background='white'" />
Perché dovresti fare javascript, esp. javascript in linea per qualcosa di simile se puoi farlo con i CSS? –
Vedere i miei commenti alla soluzione Piotr di seguito. Pure CSS per il pulsante di input non funziona in IE. E JS in linea è solo per l'esempio, ovviamente se è necessaria una funzione più complessa dovrebbe essere una funzione. Comunque puro workd CSS per l'elemento
Voglio trovare una soluzione in cui funzioni anche se rilasci il pulsante del mouse all'esterno del target –
Per me funziona solo con:
<style>
input:active{ background-color:green}
</style>
Un'altra opzione è quella di spec ify al passaggio del mouse, solo per i pulsanti:
<style>
input[type=button]:hover{ background-color: #46000D}
<style>
Questo funziona solo con il mouse verso il basso. – xdazz
Non sembra funzionare in IE? –
@Trekstuff quale IE? Per elementi diversi da a è supportato in IE solo dalla versione 8.0: https://developer.mozilla.org/en-US/docs/CSS/:active. –