Changes between Version 4 and Version 5 of Styling Form Controls


Ignore:
Timestamp:
Feb 19, 2011 1:35:53 AM (10 years ago)
Author:
tkent@chromium.org
Comment:

Mention validation messages

Legend:

Unmodified
Added
Removed
Modified
  • Styling Form Controls

    v4 v5  
    55This article will illustrate how we
    66can customize their appearances using the pseudo classes.
     7
     8Note: These pseudo classes are not standardized and we might change the behavior in the future.
    79
    810== <progress> ==
     
    9698
    9799TODO.
     100
     101== Form validation message ==
     102
     103Suppose that you want to modify colors of validation messages. Add the following CSS declarations:
     104{{{
     105::-webkit-validation-bubble-message {
     106    color: <text-color>;
     107    background: none;
     108    background-color: <background-color>;
     109    border-color: <border-color>;
     110}
     111
     112::-webkit-validation-bubble-top-outer-arrow {
     113    border-bottom-color: <border-color>;
     114}
     115
     116::-webkit-validation-bubble-top-inner-arrow {
     117    border-bottom-color: <background-color>;
     118}
     119}}}
     120
     121The default appearance is defined around http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css#L589 (Search for "validation")