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

Posted 2023-03-06

【中文标题】输入类型按钮在按下时会改变颜色？

【英文标题】：Input type button changes color while pressed?

【发布时间】：2012-08-13 11:42:51

【问题描述】：

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

【参考方案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 适用于 元素，因此如果作者未绑定到 元素 - 不需要 JS 解决方案。 （当然如果需要支持IE8以下的浏览器——JS是唯一的解决方案）

我想找到一个解决方案，如果您在目标之外释放鼠标按钮，它也可以工作

【参考方案3】：

对我来说，它只适用于：

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

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

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