Changes between Version 10 and Version 11 of Styling Form Controls


Ignore:
Timestamp:
Apr 18, 2011 1:34:29 PM (13 years ago)
Author:
morrita@google.com
Comment:

--

Legend:

Unmodified
Added
Removed
Modified

  • Styling Form Controls

    v10 v11  
    1010== <progress> ==
    1111
    12 You can customize {{{<progress>}}} element by {{{-webkit-progress-bar-value}}} pseudo class.
    13 An example following:
     12By giving "{{{-webkit-appearance: none;}}}", {{{<progress>}}} element creates two internal elements for its rendering.
     13Since each internal element has a pseudo class, you can customize the appearance by changing the style of these pseudo classes.
    1414
    1515{{{
    16 progress.custom {
    17     -webkit-appearance: none;
    18     background-color: blue;
    19 }
    20 
    21 progress.custom::-webkit-progress-bar-value {
    22     background-color: red;
    23 }
     16<progress>
     17    ┗ <div> ::-webkit-progress-bar
     18         ┗ <div>::-webkit-progress-value
    2419}}}
    2520
    26 In this example, we first disable the default visual by {{{-webkit-appearance: none}}},
    27 then give styles, one for {{{<progress>}}} element itself, another for its "bar" part.
     21The default appearance is defined in http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css .
     22Note that the width value of {{{-webkit-progress-value}}} is overwritten internally by WebKit based on the {{{value}}} atribute.
    2823
    29 With this tyle, following HTML fragment...
     24You can find [http://trac.webkit.org/browser/trunk/LayoutTests/fast/dom/HTMLProgressElement/progress-bar-value-pseudo-element.html an example] of {{{<progress>}}} appearance customization in the WebKit test suite.
    3025
    31 {{{
    32   <progress class="custom" min="0" max="100" value="30" />
    33 }}}
     26[[Image(source:trunk/LayoutTests/platform/mac/fast/dom/HTMLProgressElement/progress-bar-value-pseudo-element-expected.png, 25%)]]
    3427
    35 ...looks like:
    36 
    37 [[Image(custom-progress.png, 25%)]]
    38 
    39 Of course, we can also set properties other than {{{background-color}}}.
    4028
    4129== <meter> ==
    4230
    43 As {{{<progress>}}}, {{{<meter>}}} can be customized by pseudo classes.
    44 But it's more complicated because {{{<meter>}}} has three different 3 states ({{{optimal}}}, {{{suboptimal}}} and {{{even-less-good}}})
    45 and 2 directions ({{{horizontal}}} and {{{vertical}}}).
    46 
    47 WebKit defines 8 pseudo classes to handle them:
    48 
     31As {{{<progress>}}}, {{{<meter>}}} also creates internal elements for rendering when "{{{-webkit-appearance: none;}}}" is given.
     32Internal elements hierarchy is almost same as {{{<progress>}}}
     33 
    4934{{{
    50   meter.custom::-webkit-meter-horizontal-bar { background: gray; }
    51   meter.custom::-webkit-meter-horizontal-optimum-value { background: green; }
    52   meter.custom::-webkit-meter-horizontal-suboptimal-value { background: yellow; }
    53   meter.custom::-webkit-meter-horizontal-even-less-good-value { background: red; }
    54   meter.custom::-webkit-meter-vertical-bar { background: gray; }
    55   meter.custom::-webkit-meter-vertical-optimum-value { background: blue; }
    56   meter.custom::-webkit-meter-vertical-suboptimal-value { background: purple; }
    57   meter.custom::-webkit-meter-vertical-even-less-good-value { background: white; }
     35<meter>
     36    ┗ <div> ::-webkit-progress-bar
     37         ┗ <div> ::-webkit-meter-optimum-value, ::-webkit-meter-suboptimum-value, ::-webkit-meter-even-less-good-value
    5838}}}
    5939
    60 Note that background "bar" part has directions, but has no state.
     40Note that the pseudo class of the second element dynamically changes based on element's {{{value}}} attribute.
     41The width value of {{{-webkit-progress-value}}} is overwritten internally as {{{<progress>}}}.
    6142
    62 With this style, following HTML fragment...
    63 {{{
    64   <meter class="custom" style="height:20px; width:80px;"
    65                min="0" max="100" low="30" high="60" optimum="100" value="90" ></meter>
    66   <meter class="custom" style="height:20px; width:80px;"
    67                min="0" max="100" low="30" high="60" optimum="100" value="30" ></meter>
    68   <meter class="custom" style="height:20px; width:80px;"
    69                min="0" max="100" low="30" high="60" optimum="100" value="10" ></meter>
    70   <meter class="custom" style="height:100px; width:80px;"
    71                min="0" max="100" low="30" high="60" optimum="100" value="90" ></meter>
    72   <meter class="custom" style="height:100px; width:80px;"
    73                min="0" max="100" low="30" high="60" optimum="100" value="50" ></meter>
    74   <meter class="custom" style="height:100px; width:80px;"
    75                min="0" max="100" low="30" high="60" optimum="100" value="10" ></meter>
    76 }}}
     43[http://trac.webkit.org/browser/trunk/LayoutTests/fast/dom/HTMLMeterElement/meter-styles.html An example] is also available for {{{<meter>}}} customization in the test suite.
    7744
    78 ...looks like:
    7945
    80 [[Image(custom-meter.png, 25%)]]
     46[[Image(source:trunk/LayoutTests/platform/mac/fast/dom/HTMLMeterElement/meter-styles-expected.png, 25%)]]
     47
    8148
    8249=== <meter> variations ===
    8350
    84 On Mac OS X, WebKit provide multiple built-in appearances for {{{<meter>}}}.
     51On Mac OS X, WebKit provides multiple built-in appearances for {{{<meter>}}}.
    8552
    8653 * {{{-webkit-appearance: continuous-capacity-level-indicator;}}} (Default)