Greetings, not sure what I’m doing wrong, I’m wanting to add some padding to my <select> element. it works fine in FF, but not in IE. if you look at el11 in this page even in IE, it looks fine. I’m not sure what my page is missing. isn’t a simple matter of padding?
It gets buggy in IE if you try to use padding on a <select>. You can mess with font-size and the width/height but other then that it get’s dangerously buggy. <select>'s are inline elements and if you want heights/widths to be applied to inline elements you need to add display:block; which will make it a block element.
RyanReese, thanks for the reply. I’ll mess with this a bit more to see what I can do. I’m interested in getting your help on a couple css items. I’ll IM you about them.
Not necessarily. Most css books you might’ve read define two types, inline and block but that’s far from the truth, there are subsets of those, and for inline there’s actual real inline elements and replaced elements ( mostly form controls and such ) , the select element being one of them. You can define a width and as far as I remember, all browsers would resize it fine horizontally, but vertically with a height only Gecko and Presto - Webkit and Trident don’t allow you to. Though if you want a line break after the element, you’d throw on the display block.
Please try not to IM since more people can learn by posting here.
Thank you!
Form elements such as <input> are replaced inline elements. I know that.
Hmm you are right. If a regular inline element tries to have padding it won’t work.
The W3C’s CSS2 spec states that for Inline, non-replaced elements, the ‘width’ property does not apply.
Since form elements (most of them) are replaced inline elements padding should work.
<select>'s are inline elements and if you want heights/widths to be applied to inline elements you need to add display:block; which will make it a block element.
As Soulscratch said select elements are “replaced” elements just the same as img elements (and input, textarea and object) and can take dimensions as required without being turned into display:block. In effect “replaced” elements behave more like inline-block elements than inline elements.
However, as far as what is allowed to be styled on form controls though is another matter and all browsers differ on what properties they allow. Apart from simple styling its best to leave them at their default appearance in most cases. You can add width to select elements but as noted padding or height doesn’t haven’t an effect.
Form controls are one of those areas where if something doesn’t seem to work then the chances are that the property is not available for that element on that particular browser.
The reason for the probems is that form controls often take on the appearance of the browser and therefore are completely different in different browsers. Just look at safari’s form controls for example.
I know.
Care to explain about Saffy’s form controls? Most new people probably don’t get it.
Greetings, not sure what I’m doing wrong, I’m wanting to add some padding to my <select> element. it works fine in FF, but not in IE. if you look at el11 in this page even in IE, it looks fine. I’m not sure what my page is missing. isn’t a simple matter of padding?
You are looking at a screenshot of mozillas rendering 
This is the IE screenshot:
http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single/#ie6-xp
As to why form elements are hard to style then its because they are complicated elements with many internal styles via the browers own stylesheet.
This is a very short extract from mozillas forms.css which gives the elements their default styling.
extract from form.css
button,
input[type="reset"],
input[type="button"],
input[type="submit"] {
-moz-appearance: button;
/* The sum of border-top, border-bottom, padding-top, padding-bottom
must be the same here, for text inputs, and for <select>. For
buttons, make sure to include the -moz-focus-inner border/padding. */
padding: 0px 6px 0px 6px;
border: 2px outset ButtonFace;
background-color: ButtonFace;
color: ButtonText;
font: -moz-button;
line-height: normal !important;
white-space: pre;
cursor: default;
-moz-box-sizing: border-box;
-moz-user-select: none;
-moz-binding: none;
text-align: center;
}
button {
/* Buttons should lay out like "normal" html, mostly */
white-space: normal;
text-indent: 0;
}
*|*::-moz-button-content {
display: block;
}
button:active:hover,
input[type="reset"]:active:hover,
input[type="button"]:active:hover,
input[type="submit"]:active:hover {
padding: 0px 5px 0px 7px;
border-style: inset;
}
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
padding: 0px 2px 0px 2px;
border: 1px dotted transparent;
}
button:focus::-moz-focus-inner,
input[type="reset"]:focus::-moz-focus-inner,
input[type="button"]:focus::-moz-focus-inner,
input[type="submit"]:focus::-moz-focus-inner,
input[type="file"] > input[type="button"]:focus::-moz-focus-inner {
border-color: ButtonText;
}
Unfortunately IE does this default styling via the registry and cannot be accessed.
Older safari allowed virtually no styling of form controls at all because they were treated as part of the browser and a consistent stylised look was wanted.
Newer versions of Safari now allow much ,more styling but some elements are still glassy buttons compared to the flat look in other browsers and can’t be changed much.
The article at Berea St goes into much more detail with screenshots showing the differences.
The original thought was that we shouldn’t be meddling with the styling of form controls as users are expecting a consistent look when entering data. I have seen some forms styled so badly that it becomes hard to use and users would shy away from them.
However, I think it was a mistake (for UAs) to not allow a consistent approach to sizing (padding and borders etc) as form controls are usually the main elements you want to align nicely with each other and sizing does become important.
I thought you were meaning about recent Saffy versions because I knew about Saffy’s old versions and forms but I thought there was some new thing as of ver 3.0 or something >_<. My bad.