3

I’m currently trying to have an attractive form part of which includes a keygen tag. This works well, but when I try to apply the same CSS I’m using for the “text” fields to the keygen tag I get a less than optimal effect. Is there a quick reference as to what styles work with the keygen field and which don’t?

UPDATE

Sorry I wasn't in front of my development machine earlyer and unable to provide a screenshot, now I am...

Current screenshot is 1

Current CSS (fragment) reads 

            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;
            }

Where setup is the id of the form. (I'm planning on increasing the font size of the label's to match the text entry boxes BTW)

UPDATE2 here is a jsfiddle link http://jsfiddle.net/uAsJN/

4

1 に答える 1

3

Hope this can help you a bit!

Styling <keygen>

Should be easy, right? Maybe not as easy as you would think.

In Firefox, the <keygen> element is replaced by a <select _moz-type="-mozilla-keygen">. Therefore, to style it, you should use the select[_moz-type="-mozilla-keygen"] selector.

In Chrome, the <keygen> element stays, but implicitly contains a <select>. You can style it by using the keygen::-webkit-keygen-select selector. However, since you should style <keygen> as if it were a single <select> just in case the behaviour changes in the future, you will need to remove the style on webkit only for a consistent interface.

This can be achieved by wrapping the webkit only selectors in @media screen and (-webkit-min-device-pixel-ratio:0); if this confuses you, checkout the stylesheet on GitHub.

Source: http://keygen.alexchamberlain.co.uk/

Git Source: https://github.com/alexchamberlain/keygen

于 2012-10-05T23:36:15.163 に答える