Changes between Version 1 and Version 2 of Styling Form Controls


Ignore:
Timestamp:
Oct 18, 2010, 5:41:04 AM (15 years ago)
Author:
morrita@google.com
Comment:

--

Legend:

Unmodified
Added
Removed
Modified

  • Styling Form Controls

    v1 v2  
    2424In this example, we first disable the default visual by {{{-webkit-appearance: none}}},
    2525then give styles, one for {{{<progress>}}} element itself, another for its "bar" part.
     26Of course, we can also set properties other than {{{background-color}}}.
    2627
    2728With this tyle, following HTML fragment...
    … …  
    3334...looks like:
    3435
    35 XXX.
     36[[Image(custom-progress.png, 25%)]]
    3637
    3738== <meter> ==
    … …  
    5859With this style, following HTML fragment...
    5960{{{
    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>
     61  <meter class="custom" style="height:20px; width:80px;"
     62               min="0" max="100" low="30" high="60" optimum="100" value="90" ></meter>
     63  <meter class="custom" style="height:20px; width:80px;"
     64               min="0" max="100" low="30" high="60" optimum="100" value="30" ></meter>
     65  <meter class="custom" style="height:20px; width:80px;"
     66               min="0" max="100" low="30" high="60" optimum="100" value="10" ></meter>
     67  <meter class="custom" style="height:100px; width:80px;"
     68               min="0" max="100" low="30" high="60" optimum="100" value="90" ></meter>
     69  <meter class="custom" style="height:100px; width:80px;"
     70               min="0" max="100" low="30" high="60" optimum="100" value="50" ></meter>
     71  <meter class="custom" style="height:100px; width:80px;"
     72               min="0" max="100" low="30" high="60" optimum="100" value="10" ></meter>
    6673}}}
    6774
    68 ...looks like  this:
     75...looks like:
    6976
    70 XXX:
     77[[Image(custom-meter.png, 25%)]]
    7178
    7279=== <meter> variations ===
    … …  
    8188You can find the rendering result in the test suite:
    8289
    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]
     90[[Image(source:trunk/LayoutTests/platform/mac/fast/dom/HTMLMeterElement/meter-appearances-capacity-expected.png, 25%)]]
     91
     92[[Image(source:trunk/LayoutTests/platform/mac/fast/dom/HTMLMeterElement/meter-appearances-rating-relevancy-expected.png, 25%)]]
    8593
    8694== <input> element ==