如何在onclick输入类型按钮上应用不同的样式？

Question

我使用的HTML输入类型的按钮，它具有渐变背景颜色，反之亦然悬停，但我想点击应该有坚实的背景颜色，如果我释放按钮，然后它显示为正常状态。

Answer 1

所以，当你按住鼠标按钮时，你希望它改变样式，然后当你释放它恢复正常？您可以使用jQuery中的mousedown和mouseup事件。

基本结构：

("#element").mousedown(function(){ 
    this.css(); 
}); 

("#element").mouseup(function(){ 
    this.css(); 
}); 

Answer 2

你需要下面的CSS添加到您的按钮。

<button type="button" class="myBtn">Highlight me when Clicked</button> 
.myBtn:active { 
    background-color: #dd4814; 

} 

查看fiddle。根据您的要求更改css。

Answer 3

你的HTML：

<input type="button" id="buttonId" value="Button" onclick="showChanges()"/> 

和JS：

<script> 
function showChanges(){ 
    document.getElementById("buttonId").style.backgroundColor ="red"; 
} 
</script> 

Answer 4

试试这个

<input type="button" class="button_example" href="#" value="PREVIEW BUTTON"></input> 

.button_example:active{ 
    background:#000; 
} 

http://jsbin.com