输入按钮有效样式？（无锚）

jquery
css

2012-08-11 72 views 4 likes

我正在努力制作一些时尚的按钮，尽可能使用基本的HTML。输入按钮有效样式？（无锚）

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

但是，样式化“按下”状态证明是困难的。在我看起来在线的地方，设计者似乎通过使用锚点来绕过这个问题，然后利用CSS的:active伪类。不幸的是，它似乎没有按钮。他们有:focus，但这并不是真正的相同方式。

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

谢谢！

来源

2012-08-11 Nathanael

哪些浏览器是：活动状态不适合您？这个真正难看的按钮的活动状态在Safari，Chrome和Firefox中可用：http://jsfiddle.net/85BKk/ – DuMaurier 2012-08-11 02:08:24

哦！事实证明你很好 - '：active'伪类*不工作！事实证明，它不适合我的原因是因为我的CSS字母化了，所以我的'：hover'规则覆盖了'：active'。感谢您的帮助！ – Nathanael 2012-08-11 02:15:36

回答

实际上，您可以将:active伪类应用到窗体按钮。

下面是一个例子：

http://jsfiddle.net/xvWG5/

希望这有助于！

来源

2012-08-11 02:12:00 Cynthia

input:active { 
    background-color: red; 
}

这对我的作品在Firefox，Chrome和IE9

来源

2012-08-11 02:03:06

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

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

来源

2012-08-11 02:11:59

您可以选择使用标签吗？我想你会发现它无限灵活。例如，：激活状态确实出现了我在Safari工作，铬&火狐（我没有在时刻访问IE）：

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

button:active { 
    background-color: blue; 
}

来源

2012-08-11 02:12:48

输入按钮有效样式？ （无锚）

回答

相关问题

输入按钮有效样式？（无锚）