3

我目前正在尝试制作一个有吸引力的表单，其中包括一个 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。（我计划增加标签的字体大小以匹配文本输入框顺便说一句）

UPDATE2 这里是一个 jsfiddle 链接http://jsfiddle.net/uAsJN/

4

1 回答 1

3

希望这可以帮助你一点！

造型<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 only 选择器来实现@media screen，(-webkit-min-device-pixel-ratio:0);如果这让您感到困惑，请查看 GitHub 上的样式表。

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

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

于 2012-10-05T23:36:15.163 回答