Question

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

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

然而，造成“压下”状态的风格证明是困难的。我在网上看到的任何地方，设计师似乎都通过使用锚来绕过这个问题，然后利用CSS的:active伪类。不幸的是，看起来按钮没有这个。他们有:focus，但实际上并没有那么相同。

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

谢谢！

Answer 1

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

以下是一个例子：

http://jsfiddle.net/xvWG5/

希望这有帮助！

Answer 2

input:active {
    background-color: red;
}

这适用于Firefox，Chrome和IE9

Answer 3

你想要达到什么样的造型？在Safari6和FF12中按下时，我可以看到this fiddle中元素的字体颜色变为红色。

W3 suggests there may be cross-browser inconsistencies支持动态伪类和处理某些属性;您需要提供您遇到问题的示例代码。

Answer 4

您是否可以选择使用标签？我想你会发现它更加灵活。例如，：活动状态似乎在Safari，Chrome和＆amp; Firefox（我暂时无法访问IE）：

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

button:active {
    background-color: blue;
}

输入按钮活动样式？（没有锚）

4 个答案:

输入按钮活动样式？ （没有锚）

4 个答案:

输入按钮活动样式？（没有锚）