2012-08-17 151 views
6

我希望我的輸入類型=按鈕僅在按下時更改顏色。例如,如果我有一個白色按鈕,我希望它只在按下時變成綠色,而當它不再按下時,我希望它返回白色。我如何在HTML和Javascript中做到這一點? (對不起我的英文不好,謝謝您)輸入類型按鈕在按下時是否改變顏色?

回答

5

該狀態的CSS選擇器稱爲:active

所以,如果你這樣做:

input.btn:active { background:green }

,應該工作。

demo

+0

這隻適用於鼠標按下。 – xdazz 2012-08-17 01:49:27

+1

在IE中似乎不起作用? – 2012-08-17 01:56:33

+0

@Trekstuff哪個IE?對於除IE以外的元素,僅在8.0版本中支持IE:https://developer.mozilla.org/en-US/docs/CSS/:active。其實在IE9中@PiotrJakubowski – 2012-08-17 02:02:04

1

普通的香草HTML + JavaSctipt:

<input type="button" style="background-color:white" value="Click Me" onmousedown="this.style.background='green'" onmouseup="this.style.background='white'" /> 

演示:http://jsfiddle.net/bqjzq/

+1

你爲什麼要做javascript,尤其是內嵌JavaScript的東西,如果你可以用CSS來做到這一點? – 2012-08-17 02:36:54

+0

請參閱下面我對Piotr解決方案的評論。純CSS輸入按鈕在IE中不起作用。內聯JS僅僅是一個例子,當然如果需要更復雜的函數,它應該是一個函數。無論如何,純CSS處理

+0

我想找到一個解決方案,它也可以工作,如果你釋放目標外的鼠標按鈕 – 2014-05-28 16:36:13

1

對我來說,只有工作:

<style> 
input:active{ background-color:green} 
</style> 

另一種選擇是規範ify on mouse over,僅用於按鈕:

<style> 
input[type=button]:hover{ background-color: #46000D} 
<style> 
相關問題