Changes between Version 14 and Version 15 of Styling Form Controls

Timestamp:

Jul 17, 2012 12:18:49 AM (12 years ago)

Author:

tkent@chromium.org

Comment:

Add a section for <input type=date>

Styling Form Controls

@@ -83 +83 @@
 input:-webkit-autofill { background: papayaWhip; color: hotPink; }
 }}}
+
+=== Date input type ===
+
+You can disable the native calendar picker by the following code:
+
+{{{
+<style>
+::-webkit-calendar-picker-indicator {
+    display: none;
+}
+</style>
+<script>
+dateInput.addEventListener('keydown', function(event) {
+    if (event.keyIdentifier == "Down") {
+        event.preventDefault()
+    }
+}, false);
+</script>
+}}}
+
+Note: This doesn't work for iOS, Android, and Blackberry.
+
+There are no ways to specify the date format in the text box. It always reflect OS setting.
+Also, there are no ways to specify style of the native calendar picker.
 
 == Form validation message ==
@@ -162 +186 @@
 
 ::-webkit-validation-bubble-message:before {
-  content: "";
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  margin-right: 4px;
-  background: url(http://trac.webkit.org/export/90202/trunk/Source/WebCore/inspector/front-end/Images/errorMediumIcon.png)
+    content: "";
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    margin-right: 4px;
+    background: url(http://trac.webkit.org/export/90202/trunk/Source/WebCore/inspector/front-end/Images/errorMediumIcon.png)
 }