Styling <select> menus using only CSS/CSS3
I wish to know why can't we style a select
HTML 4.01 (or is it CSS 2.1?) let User Agents style form elements the way they want. So there has been little standardisation and when you filed a bug in the bugzilla of WebKit (mostly), the answer was something like "Show me which part of the Recommendation is buggily implemented in my rendering engine. None? OK WONTFIX KTHXBYE".
To be fair, 3 vendors have 3 OS and 3 UI to consider, Apple had 2 and now 1 and the 5th had more important problems to solve.
Here's the state of the art from 2007: Styling form controls with CSS, revisited (R. Johansson). As far as WebKit may annoy me, I don't regret that time! (except Safari 2: "we can't do anything" was an answer easily understood by clients, more easily than "Yes but not everything... This and that, etc")
So no padding in WebKit afaik and if you really really need a very custom look everywhere, than go for custom lists and WAI ARIA to mimick native elements.
EDIT: this article is a very good summary: The Problem Of CSS Form Elements (Smashing Magazine, Gabriele Romanato)
MDN article seems outdated. I'll have to do further tests but legend can be floated in IE8+. What's written is true for IE7 and IE6 though. Absolute positioning (and a known width) was the only way to position it in these browsers.
Simply put, you won't find a cross-browser CSS-only method, because one doesn't exist.
The reason one doesn't exist, and why select controls differ from other HTML elements, is because they (and other form controls) are OS-level elements. That is, the browser leaves it up to the OS to determine the style of the elements. This was done in part because every operating system has its own form styles, and the standards groups chose to keep that consistent on a platform basis (makes them recognizable to the user as a form). As such, there's little, if any, CSS available that the controls will actually heed, let alone anything that is actually cross-browser.
In other words, you're stuck with the JavaScript methods that you've found if you want more than basic text size and color, margin, or padding in pretty much any form input element.
<style name='abc'>
<option name='a' style='color: red; background-color: #fff;'>Hello</option>
</style>
通过这种方式，您可以为样式标记添加更多样式属性。
链接地址: http://www.djcxy.com/p/41598.html上一篇: 如何样式选择交叉浏览器