mozilla

Revision 370589 of range

  • Revision slug: User:Jonathan_Watt/range
  • Revision title: range
  • Revision id: 370589
  • Created:
  • Creator: Jonathan_Watt
  • Is current revision? No
  • Comment
Tags: 

Revision Content

Styling of <input type=range>

When the 'type' of an <input> is set to "range", it provides two pseudo-elements that can be styled to enable content author styling of the component parts of the range. The structure of these pseudo-elements is as follows:

<input>
  ::-moz-range-track
  ::-moz-range-thumb

::-moz-range-track

The ::-moz-range-track pseudo-element can have its width, height, background, padding, border and margin properties set, but its positioning is handled automatically. It is positioned so that the center of its border box is positioned exactly on the center of its <input>'s content box. This behavior is designed to help content authors by automatically positioning the track correctly when the content author wants the track to be slightly bigger or smaller than the content box of the <input> (e.g. so that it extends past the edge of the thumb when the range is at 0%/100% of its value).

Revision Source

<h2 id="Content_author_styling_of_&lt;input_type.3Drange&gt;">Styling of &lt;input type=range&gt;</h2>
<p>When the 'type' of an &lt;input&gt; is set to "range", it provides two pseudo-elements that can be styled to enable content author styling of the component parts of the range. The structure of these pseudo-elements is as follows:</p>
<pre>
<code>&lt;input&gt;
  ::-moz-range-track
  ::-moz-range-thumb</code></pre>
<h3 id=".3A.3A-moz-range-track">::-moz-range-track</h3>
<p>The ::-moz-range-track pseudo-element can have its width, height, background, padding, border and margin properties set, but its positioning is handled automatically. It is positioned so that the center of its border box is positioned exactly on the center of its &lt;input&gt;'s content box. This behavior is designed to help content authors by automatically positioning the track correctly when the content author wants the track to be slightly bigger or smaller than the content box of the &lt;input&gt; (e.g. so that it extends past the edge of the thumb when the range is at 0%/100% of its value).</p>
Revert to this revision