2. You must be able to use CSS to style the element, especially the UI that we generate. This includes any pre-defined pseudo-selectors (invalid, required, icon, etc.)
Agreed, this is an absolute requirement.
Whenever there is ''any'' custom appearance of a form control, e.g. based on the new types, designers ''must'' be able to restyle them to fit in with their design. This means at a minimum:
** consider existing [http://www.w3.org/TR/css3-ui/#pseudo-elements CSS3-UI pseudo-elements]
*** ::value can be used for selecting/styling placeholder text (see [https://bugzilla.mozilla.org/show_bug.cgi?id=457801#c25 bug 457801 comment 25])
*** ::choices can theoretically be used to style the popped-up state of a <code><select></code> pop-up menu. No known implementations.*** ::repeat-item - no known applicability to HTML(5) form controls, at-risk in CSS3-UI, likely to be dropped.*** ::repeat-index- no known applicability to HTML(5) form controls, at-risk in CSS3-UI, likely to be dropped.
** consider additional pseudo-elements based on vendor prefixed pseudos
*** Safari 5 supports pseudo-elements for restyling overflow scrollbars
**** ::webkit-scrollbar-track
**** ::webkit-scrollbar
** consider additional pseudo-elements based on web designer requests for stylability of form controls
*** <code>[[HTML5/select|<select>]]</code>
**** [http://stackoverflow.com/questions/611482/change-color-and-appearance-of-drop-down-arrow color and appearance of drop down arrow]
*** <code>[[HTML5/input#type_search|<input type=search>]]</code>
**** see examples from Jonas Sicking
* ability to select specific "states" of any form control (may require ability to select states of specific pieces as well - that will be a challenge though as pseudo-elements themselves cannot have pseudo-classes in CSS)
** existing [http://www.w3.org/TR/css3-selectors/#UIstates Selectors UI pseudo-classes], and some notes on [http://www.w3.org/TR/html5/interactive-elements.html#pseudo-classes how HTML5 DOM property states trigger these pseudo-classes]