WD-css3-ui-20150224-value-choices

This is an archive page for the ::value and ::choices pseudo-elements and related aspects. Spec source markup is included here (direct cut/paste) from the CSS3-UI editor's draft that was last published in http://www.w3.org/TR/2015/WD-css3-ui-20150224/

Spec Markup

from class='metadata' section:

At Risk: ::value ::choices pseudo-elements

from Introduction section:

This module describes selectors and CSS properties which enable authors
to style user interface related states, element fragments, properties
and values.

...

introduced several user interface related pseudo-classes, properties and values.
<a href="http://www.w3.org/TR/css3-selectors/#UIstates">Section 6.6.4 of Selectors</a> [[!SELECT]] also describes several additional user interface related pseudo-classes (and one pseudo-element).

...

This Working Draft incorporates and extends them to provide the ability, through CSS,
to style elements based upon additional user interface states,
to style fragments of user interface elements, and to alter the
dynamic presentation of elements in ways previously only available through specific HTML elements and attributes.

from heading level 2 section User Interface Selectors:

<h2 id="selectors">User Interface Selectors</h2>

<h3 id="pseudo-elements">User interface element fragments: pseudo-elements</h3>

This specification introduces two new pseudo-elements
to provide access to additional user interface element fragments.
<ul>
  <li>::value
  <li>::choices
</ul>

Note: The ::value and ::choices
pseudo-elements are at risk.

<h4 id="pseudo-value">::value</h4>

A form element may contain both a label for its data value,
and the data value itself.
For such elements, the ::value pseudo-element
selects the representation of just the data value itself,
in order to style its appearance.

The ''::value'' pseudo-element is similar to an inline-level element,
but with certain restrictions.
The following properties apply to ''::value''
pseudo-element: font properties, color property, background properties,
'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align',
'text-transform', 'line-height'.  UAs may apply other properties as well.


<h4 id="pseudo-choices">::choices</h4>

Similarly, a form element which represents a list of options
may contain both a label for the list,
and the list of choices itself.
For such elements,
the ''::choices'' pseudo-element selects
the representation of just the list of choices themselves,
in order to style their appearance.

A list of radio buttons can also be selected with the ''::choices'' pseudo-element,
and the currently chosen radio button can be selected with the ''::value'' pseudo-element.

from heading level 3 section List of substantial changes:

<li><css>::value</css> pseudo-element. Added detail about which properties apply to the ::value pseudo-element.

Spec Markup

See Also