keygen标签的CSS样式化

Question

我目前正在尝试制作一个吸引人的表单，其中包括一个keygen标签。这个工作得很好，但当我尝试将同样的CSS应用于“文本”字段的keygen标签时，效果不佳。是否有一个快速参考来确定哪些样式适用于keygen字段，哪些不适用？

更新

抱歉，我之前没有在我的开发机前面，无法提供屏幕截图，现在我可以...

当前屏幕截图是1 当前CSS（片段）阅读

            form#setup textarea {
            background: #ffffff;
            border: none;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            -khtml-border-radius: 3px;
            border-radius: 3px;
            font: italic 26px Georgia, "Times New Roman", Times, serif;
            outline: none;
            padding: 5px;
            width: 450px;
            }
        form#setup keygen {
            background: #ffffff;
            border: none;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            -khtml-border-radius: 3px;
            border-radius: 3px;
            font: italic 26px Georgia, "Times New Roman", Times, serif;
            outline: none;
            padding: 5px;
            width: 450px;
            }

这里的“setup”是表单的ID。（顺便说一下，我计划增加标签的字体大小以匹配文本输入框）

更新2：这里是一个jsfiddle链接 http://jsfiddle.net/uAsJN/

- user70568

---

我不知道有没有快速参考资料，而且规范也没有提到这个。但是如果你能给我们一个例子，我可以帮你把它变得更好。 - Allan Kimmer Jensen

你能举一个“不太优化”的例子，以及你尝试应用的样式吗？最好提供一个链接... - Marius Stuparu

你能否在http://jsfiddle.net上创建一个测试用例？ - Madara's Ghost

PS: 截图是来自 Chrome 浏览器，相同的问题也存在于 Firefox、IE 和 Safari 中，由于它们对 keygen 标签的实现有所不同，因此它们的界面略有不同。Opera 中未测试。 - user70568

@MadaraUchiha 请查看 http://jsfiddle.net/uAsJN/ - user70568

Answer 1

希望这能对你有所帮助！

美化 <keygen>

应该很容易，对吗？可能没有你想象的那么容易。

在Firefox中，<keygen>元素被一个<select _moz-type="-mozilla-keygen">替代。因此，要为其设置样式，应使用select[_moz-type="-mozilla-keygen"]选择器。

在Chrome中，<keygen>元素保持不变，但隐含地包含了一个<select>。您可以使用keygen::-webkit-keygen-select selector来设置其样式。然而，由于您应该将<keygen>的样式设置为单个<select>，以防行为在未来发生变化，因此您需要仅在Webkit上删除样式，以获得一致的界面。

这可以通过将仅适用于 Webkit 的选择器包装在 @media screen 和 (-webkit-min-device-pixel-ratio:0); 中来实现。如果这让您感到困惑，请查看GitHub上的样式表。

来源：http://keygen.alexchamberlain.co.uk/

Git源代码：https://github.com/alexchamberlain/keygen

- newpxsn