Changes between Version 14 and Version 15 of Styling Form Controls


Ignore:
Timestamp:
Jul 17, 2012 12:18:49 AM (9 years ago)
Author:
tkent@chromium.org
Comment:

Add a section for <input type=date>

Legend:

Unmodified
Added
Removed
Modified
  • Styling Form Controls

    v14 v15  
    8383input:-webkit-autofill { background: papayaWhip; color: hotPink; }
    8484}}}
     85
     86=== Date input type ===
     87
     88You can disable the native calendar picker by the following code:
     89
     90{{{
     91<style>
     92::-webkit-calendar-picker-indicator {
     93    display: none;
     94}
     95</style>
     96<script>
     97dateInput.addEventListener('keydown', function(event) {
     98    if (event.keyIdentifier == "Down") {
     99        event.preventDefault()
     100    }
     101}, false);
     102</script>
     103}}}
     104
     105Note: This doesn't work for iOS, Android, and Blackberry.
     106
     107There are no ways to specify the date format in the text box. It always reflect OS setting.
     108Also, there are no ways to specify style of the native calendar picker.
    85109
    86110== Form validation message ==
     
    162186
    163187::-webkit-validation-bubble-message:before {
    164   content: "";
    165   display: inline-block;
    166   width: 16px;
    167   height: 16px;
    168   margin-right: 4px;
    169   background: url(http://trac.webkit.org/export/90202/trunk/Source/WebCore/inspector/front-end/Images/errorMediumIcon.png)
     188    content: "";
     189    display: inline-block;
     190    width: 16px;
     191    height: 16px;
     192    margin-right: 4px;
     193    background: url(http://trac.webkit.org/export/90202/trunk/Source/WebCore/inspector/front-end/Images/errorMediumIcon.png)
    170194}
    171195