Question

我目前正试图拥有一个有吸引力的形式，其中包括一个keygen标签。这很好用，但是当我尝试将我用于“text”字段的相同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。（我打算增加标签的字体大小以匹配文本输入框BTW）

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

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

keygen标签的CSS样式

1 个答案: