Changes between Version 4 and Version 5 of Styling Form Controls

Timestamp:

Feb 19, 2011, 1:35:53 AM (14 years ago)

Author:

tkent@chromium.org

Comment:

Mention validation messages

Styling Form Controls

@@ -5 +5 @@
 This article will illustrate how we 
 can customize their appearances using the pseudo classes.
+
+Note: These pseudo classes are not standardized and we might change the behavior in the future.
 
 == <progress> ==
@@ -96 +98 @@
 
 TODO.
+
+== Form validation message ==
+
+Suppose that you want to modify colors of validation messages. Add the following CSS declarations:
+{{{
+::-webkit-validation-bubble-message {
+    color: <text-color>;
+    background: none;
+    background-color: <background-color>;
+    border-color: <border-color>;
+}
+
+::-webkit-validation-bubble-top-outer-arrow {
+    border-bottom-color: <border-color>;
+}
+
+::-webkit-validation-bubble-top-inner-arrow {
+    border-bottom-color: <background-color>;
+}
+}}}
+
+The default appearance is defined around http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css#L589 (Search for "validation")