4

我正在努力使用尽可能基本的 HTML 来制作一些时尚的按钮。

<input type="submit" value="Submit!" />

然而，事实证明，为“按下”状态设计样式是困难的。我在网上到处看，设计师似乎通过使用锚点绕过这个问题，然后利用 CSS 的:active伪类。不幸的是，按钮似乎没有这个。他们有:focus，但实际上并没有以同样的方式工作。

所以我的问题是：是否可以在不修改此 HTML 的情况下设置“向下”状态的样式？如有必要，我愿意使用 jQuery，但我主要希望有一个不涉及锚点的纯 CSS 解决方案。大家有什么推荐的？

谢谢！

4

4 回答 4

2

实际上，您可以将:active伪类应用于表单按钮。

这是一个例子：

http://jsfiddle.net/xvWG5/

希望这可以帮助！

于 2012-08-11T02:12:00.043 回答
1 
input:active {
    background-color: red;
}

这适用于 Firefox、Chrome 和 IE9

于 2012-08-11T02:03:06.517 回答
0

你想实现什么样的造型？当在 Safari6 和 FF12 中按下时，我可以看到这个小提琴中元素的字体颜色变为红色。

W3 建议在支持动态伪类和处理某些属性方面可能存在跨浏览器不一致；您需要提供您遇到问题的示例代码。

于 2012-08-11T02:11:59.170 回答
0

您可以选择使用标签吗？我想你会发现它无限灵活。例如， :active 状态在 Safari、Chrome 和 Firefox 中似乎对我有用（我目前无法访问 IE）：

button {
    background-color: red;
    color: white;
    font-weight: bold;
    font-size: 3em;
    border: 0;
}

button:active {
    background-color: blue;
}
​
于 2012-08-11T02:12:48.410 回答