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

Question

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

Answer 1

试试这个

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

.button_example:active{
  background:#000;
}

http://jsbin.com

Answer 2

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

基本结构：

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

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

Answer 3

您需要将以下css添加到按钮中。

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

}

请参阅fiddle。根据您的要求更改css。

Answer 4

您的HTML：

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

和JS：

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