使用CSS單擊時將背景色設置爲按鈕

如何使用css單擊背景色時將背景色設置爲我的<button>？使用CSS單擊時將背景色設置爲按鈕

.myBtn { 
    background-color: #fff; 
    cursor: pointer; 
    color: #000; 
    text-decoration: none; 
    text-transform: uppercase; 
}

HTML：

<button type="button" class="myBtn">Highlight me when Clicked</button>

來源

2015-05-01 Becky

像切換或僅在按下了按鈕的鼠標按鈕？ – trumank

抱歉 - 但我沒有代表對此發表評論。但我認爲這可能回答你的問題：Change background on button click, using CSS only?

編輯：哎呀。這看起來像它改變了整個背景 - 但你很可能仍然可以使用該按鈕類像這樣使用它，但改變

input[type="checkbox"]:checked + div{ 
    background: #5BC0DE; 
}

目標按鈕：

input[type="checkbox"]:checked + .mybtn{ 
    background: #5BC0DE; 
}

來源

2015-05-01 04:15:56 TBB

用主動選擇爲了這。這是一個工作FIDDLE。

.myBtn:active { 
    background-color: #dd4814; 
}

查詢this作爲參考。

編輯： 可以使用對焦選擇也

.myBtn:focus { 
    background-color: #dd4814; 
}

但在這個顏色將再次改變，如果焦點從按鈕丟失。

我想你需要藉助Javascript或JQuery來改變按鈕點擊事件的css規則。

來源

2015-05-01 04:50:56

謝謝。但點擊後會消失。我希望它在點擊後保持突出顯示。 – Becky

我已更新答案.. –

編輯答案：

<html> 
<head> 
<style> 
.myBtn:active{ 
background-color: red; 
} 
.myBtn:visited{ 
background-color: red; 
} 

</style> 
</head> 
<body> 
<button class ="myBtn">Click here to change bgcolor</button> 
</body> 
</html>

來源

2015-05-01 06:23:10

感謝您的回答。但我正在尋找這樣做在CSS（沒有js）在我的問題解釋。 – Becky

對不起，我沒有看到。請看我編輯的答案：它使用CSS。你希望按鈕的背景顏色只在用戶點擊時變爲紅色，或者在用戶點擊後保持紅色？如果您無限期地使用紅色，請使用該代碼，並且如果您希望在用戶停止單擊該按鈕後紅色背景顏色消失，請使用「已訪問」僞類刪除代碼。希望這可以幫助！ –

使用CSS單擊時將背景色設置爲按鈕

回答

相關問題