Changes between Initial Version and Version 1 of Styling Form Controls


Ignore:
Timestamp:
Oct 18, 2010 5:32:17 AM (10 years ago)
Author:
morrita@google.com
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • Styling Form Controls

    v1 v1  
     1= Styling Form Controls Using Pseudo Classes =
     2
     3WebKit provides a way to give CSS styles to form controls.
     4Some form controls can be styled through pseudo classes.
     5This article will illustrate how we
     6can customize their appearances using the pseudo classes.
     7
     8== <progress> ==
     9
     10You can customize {{{<progress>}}} element by {{{-webkit-progress-bar-value}}} pseudo class.
     11An example following:
     12
     13{{{
     14progress.custom {
     15    -webkit-appearance: none;
     16    background-color: blue;
     17}
     18
     19progress.custom::-webkit-progress-bar-value {
     20    background-color: red;
     21}
     22}}}
     23
     24In this example, we first disable the default visual by {{{-webkit-appearance: none}}},
     25then give styles, one for {{{<progress>}}} element itself, another for its "bar" part.
     26
     27With this tyle, following HTML fragment...
     28
     29{{{
     30  <progress class="custom" min="0" max="100" value="30" />
     31}}}
     32
     33...looks like:
     34
     35XXX.
     36
     37== <meter> ==
     38
     39As {{{<progress>}}}, {{{<meter>}}} can be customized by pseudo classes.
     40But it's more complicated because {{{<meter>}}} has three different 3 states ({{{optimal}}}, {{{suboptimal}}} and {{{even-less-good}}})
     41and 2 directions ({{{horizontal}}} and {{{vertical}}}).
     42
     43WebKit defines 8 pseudo classes to handle them:
     44
     45{{{
     46  meter.custom::-webkit-meter-horizontal-bar { background: gray; }
     47  meter.custom::-webkit-meter-horizontal-optimum-value { background: green; }
     48  meter.custom::-webkit-meter-horizontal-suboptimal-value { background: yellow; }
     49  meter.custom::-webkit-meter-horizontal-even-less-good-value { background: red; }
     50  meter.custom::-webkit-meter-vertical-bar { background: gray; }
     51  meter.custom::-webkit-meter-vertical-optimum-value { background: blue; }
     52  meter.custom::-webkit-meter-vertical-suboptimal-value { background: purple; }
     53  meter.custom::-webkit-meter-vertical-even-less-good-value { background: white; }
     54}}}
     55
     56Note that background "bar" part has directions, but has no state.
     57
     58With this style, following HTML fragment...
     59{{{
     60  <meter class="custom" style="height:20px; width:80px;" min="0" max="100" low="30" high="60" optimum="100" value="90" ></meter>
     61  <meter class="custom" style="height:20px; width:80px;" min="0" max="100" low="30" high="60" optimum="100" value="30" ></meter>
     62  <meter class="custom" style="height:20px; width:80px;" min="0" max="100" low="30" high="60" optimum="100" value="10" ></meter>
     63  <meter class="custom" style="height:100px; width:80px;" min="0" max="100" low="30" high="60" optimum="100" value="90" ></meter>
     64  <meter class="custom" style="height:100px; width:80px;" min="0" max="100" low="30" high="60" optimum="100" value="50" ></meter>
     65  <meter class="custom" style="height:100px; width:80px;" min="0" max="100" low="30" high="60" optimum="100" value="10" ></meter>
     66}}}
     67
     68...looks like  this:
     69
     70XXX:
     71
     72=== <meter> variations ===
     73
     74On Mac OS X, WebKit provide multiple built-in appearances for {{{<meter>}}}.
     75
     76 * {{{-webkit-appearance: continuous-capacity-level-indicator;}}} (Default)
     77 * {{{-webkit-appearance: discrete-capacity-level-indicator;}}}
     78 * {{{-webkit-appearance: relevancy-level-indicator;}}}
     79 * {{{-webkit-appearance: rating-level-indicator;}}}
     80
     81You can find the rendering result in the test suite:
     82
     83 * [source:trunk/LayoutTests/platform/mac/fast/dom/HTMLMeterElement/meter-appearances-capacity-expected.png]
     84 * [source:trunk/LayoutTests/platform/mac/fast/dom/HTMLMeterElement/meter-appearances-rating-relevancy-expected.png]
     85
     86== <input> element ==
     87
     88Coming soon...