输入类型按钮在按下时会改变颜色？答案

【问题标题】：Input type button changes color while pressed?输入类型按钮在按下时会改变颜色？
【发布时间】：2023-03-21 12:35:01
【问题描述】：

我希望我的 input type=button 仅在按下时更改颜色。例如，如果我有一个白色按钮，我希望它仅在按下时变为绿色，而当不再按下时，我希望它返回白色。如何在 HTML 和 Javascript 中做到这一点？

【问题讨论】：

标签： javascript html button input dom-events

【解决方案1】：

此状态的 CSS 选择器称为 :active

如果你这样做：

input.btn:active { background:green }

应该可以的。

见demo

【讨论】：

@Trekstuff 哪个 IE？对于 a 以外的元素，IE 仅从 8.0 版本开始支持它：developer.mozilla.org/en-US/docs/CSS/:active。
@PiotrJakubowski 实际上在 IE9 中。有趣的是，如果我单击按钮 按钮文本之外的按钮，它会起作用。但是如果我点击实际的按钮文本 - 它不会
@PiotrJakubowski 如果我使用button 元素而不是input 元素，它可以通用，例如<button type="button" class="btn">aaaa</button> 而不是 <input type="button" class="btn" value="aaaa" />
@xdazz：这就是 OP 想要的。

【解决方案2】：

普通的 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/

【讨论】：

你为什么要做javascript，尤其是。如果你可以用 CSS 做类似这样的事情的内联 javascript？
在下面查看我的 cmets 到 Piotr 解决方案。输入按钮的纯 CSS 在 IE 中不起作用。而内联JS只是为了举例，当然如果需要更复杂的函数应该是函数。无论如何，纯 CSS 适用于
我想找到一个解决方案，如果您在目标之外释放鼠标按钮，它也可以工作

【解决方案3】：

对我来说，它只适用于：

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

另一个选项是在鼠标悬停时指定，仅用于按钮：

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

【讨论】：