WordPress.org

Make WordPress Core

Changeset 29465


Ignore:
Timestamp:
08/11/2014 04:41:35 PM (5 years ago)
Author:
helen
Message:

Add styling for various HTML5 input elements. props avryl. fixes #28262.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/forms.css

    r29366 r29465  
    1 /* include margin and padding in the width calculation of input and textarea */
     1/* Include margin and padding in the width calculation of input and textarea. */
    22input,
    3 input[type="text"],
    4 input[type="password"],
    5 input[type="number"],
    6 input[type="search"],
    7 input[type="email"],
    8 input[type="url"],
    93textarea {
    104    -webkit-box-sizing: border-box;
     
    3731    min-width: 16px;
    3832    -webkit-appearance: none;
    39     -webkit-box-sizing: border-box;
    40     -moz-box-sizing: border-box;
    41     box-sizing: border-box;
    42     -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    43     box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
     33    -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.1 );
     34    box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.1 );
    4435    -webkit-transition: .05s border-color ease-in-out;
    4536    transition: .05s border-color ease-in-out;
     
    5647
    5748td > input[type="checkbox"],
    58 .wp-admin p input[type=checkbox],
    59 .wp-admin p input[type=radio] {
     49.wp-admin p input[type="checkbox"],
     50.wp-admin p input[type="radio"] {
    6051    margin-top: 0;
    6152}
    6253
    63 .wp-admin p label input[type=checkbox] {
     54.wp-admin p label input[type="checkbox"] {
    6455    margin-top: -4px;
    6556}
    6657
    67 .wp-admin p label input[type=radio] {
     58.wp-admin p label input[type="radio"] {
    6859    margin-top: -2px;
    6960}
    7061
    71 input[type=radio] {
     62input[type="radio"] {
    7263    -webkit-border-radius: 50%;
    7364    border-radius: 50%;
     
    7667}
    7768
    78 input[type=checkbox]:checked:before,
    79 input[type=radio]:checked:before {
     69input[type="checkbox"]:checked:before,
     70input[type="radio"]:checked:before {
    8071    float: left;
    8172    display: inline-block;
     
    8879}
    8980
    90 input[type=checkbox]:checked:before {
     81input[type="checkbox"]:checked:before {
    9182    content: '\f147';
    9283    margin: -3px 0 0 -4px;
     
    9485}
    9586
    96 input[type=radio]:checked:before {
     87input[type="radio"]:checked:before {
    9788    content: '\2022';
    9889    text-indent: -9999px;
     
    10798}
    10899
    109 input.readonly, textarea.readonly {
    110     background-color: #ddd;
    111 }
    112 
    113100@-moz-document url-prefix() {
    114     input[type=checkbox],
    115     input[type=radio],
     101    input[type="checkbox"],
     102    input[type="radio"],
    116103    .form-table input.tog {
    117104        margin-bottom: -1px;
     
    156143}
    157144
    158 input[type="text"],
    159 input[type="password"],
    160 input[type="number"],
    161 input[type="search"],
    162 input[type="email"],
    163 input[type="url"],
    164 textarea,
    165 select {
    166     outline: 0;
    167 }
    168 
    169145.wp-admin input[type="file"] {
    170146    padding: 3px 0;
     
    190166}
    191167
    192 textarea,
    193168input[type="text"],
    194169input[type="password"],
     170input[type="checkbox"],
     171input[type="color"],
     172input[type="date"],
     173input[type="datetime"],
     174input[type="datetime-local"],
    195175input[type="email"],
     176input[type="month"],
    196177input[type="number"],
     178input[type="password"],
    197179input[type="search"],
     180input[type="radio"],
    198181input[type="tel"],
     182input[type="text"],
     183input[type="time"],
    199184input[type="url"],
    200 select {
     185input[type="week"],
     186select,
     187textarea {
    201188    border: 1px solid #ddd;
    202     -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.07);
    203     box-shadow: inset 0 1px 2px rgba(0,0,0,0.07);
     189    -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 );
     190    box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 );
    204191    background-color: #fff;
    205192    color: #333;
    206     -webkit-transition: .05s border-color ease-in-out;
    207     transition: .05s border-color ease-in-out;
    208 }
    209 
    210 select[disabled] {
    211     color: #7f7f7f;
    212 }
    213 
    214 textarea:focus,
     193    outline: none;
     194    -webkit-transition: 0.05s border-color ease-in-out;
     195    transition: 0.05s border-color ease-in-out;
     196}
     197
    215198input[type="text"]:focus,
    216199input[type="password"]:focus,
     200input[type="color"]:focus,
     201input[type="date"]:focus,
     202input[type="datetime"]:focus,
     203input[type="datetime-local"]:focus,
    217204input[type="email"]:focus,
     205input[type="month"]:focus,
    218206input[type="number"]:focus,
     207input[type="password"]:focus,
    219208input[type="search"]:focus,
    220209input[type="tel"]:focus,
     210input[type="text"]:focus,
     211input[type="time"]:focus,
    221212input[type="url"]:focus,
    222 input[type="checkbox"]:focus,
    223 input[type="radio"]:focus,
    224 select:focus {
     213input[type="week"]:focus,
     214select:focus,
     215textarea:focus {
    225216    border-color: #5b9dd9;
    226     -webkit-box-shadow: 0 0 2px rgba(30,140,190,0.8);
    227     box-shadow: 0 0 2px rgba(30,140,190,0.8);
    228 }
    229 
    230 input[readonly] {
     217    -webkit-box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
     218    box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
     219}
     220
     221input.readonly,
     222input[readonly],
     223textarea.readonly,
     224textarea[readonly] {
    231225    background-color: #eee;
    232226}
     
    252246input:disabled,
    253247input.disabled,
     248select:disabled,
     249select.disabled,
    254250textarea:disabled,
    255251textarea.disabled {
    256     -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
    257     box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
    258     border-color: rgba(222, 222, 222, .75);
    259     background: rgba(255, 255, 255, .5);
    260     color: rgba(51, 51, 51, .5);
    261 }
    262 
    263 input[type=checkbox]:disabled,
    264 input[type=radio]:disabled,
    265 input[type=checkbox]:disabled:checked:before,
    266 input[type=radio]:disabled:checked:before {
     252    background: rgba( 255, 255, 255, 0.5 );
     253    border-color: rgba( 222, 222, 222, 0.75 );
     254    -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.04 );
     255    box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.04 );
     256    color: rgba( 51, 51, 51, 0.5 );
     257}
     258
     259input[type="file"]:disabled,
     260input[type="file"].disabled,
     261input[type="range"]:disabled,
     262input[type="range"].disabled {
     263    background: none;
     264    -webkit-box-shadow: none;
     265    box-shadow: none;
     266}
     267
     268input[type="checkbox"]:disabled,
     269input[type="checkbox"].disabled,
     270input[type="radio"]:disabled,
     271input[type="radio"].disabled,
     272input[type="checkbox"]:disabled:checked:before,
     273input[type="checkbox"].disabled:checked:before,
     274input[type="radio"]:disabled:checked:before,
     275input[type="radio"].disabled:checked:before {
    267276    opacity: 0.7;
    268277}
     
    585594
    586595.form-table input.tog,
    587 .form-table input[type=radio] {
     596.form-table input[type="radio"] {
    588597    margin-top: -4px;
    589598    margin-right: 4px;
     
    760769    }
    761770
    762     input[type=text], input[type=search],
    763     input[type=password], input[type=number] {
     771    input[type=text], input[type="search"],
     772    input[type=password], input[type="number"] {
    764773        -webkit-appearance: none;
    765774        padding: 6px 10px;
     
    771780    }
    772781
    773     input[type=checkbox], .widefat th input[type=checkbox] {
     782    input[type="checkbox"], .widefat th input[type="checkbox"] {
    774783        -webkit-appearance: none;
    775784        padding: 10px;
    776785    }
    777786
    778     .widefat th input[type=checkbox] {
     787    .widefat th input[type="checkbox"] {
    779788        margin-bottom: 8px;
    780789    }
    781790
    782     input[type=checkbox]:checked:before, .widefat th input[type=checkbox]:before {
     791    input[type="checkbox"]:checked:before, .widefat th input[type="checkbox"]:before {
    783792        font: normal 30px/1 'Dashicons';
    784793        margin: -3px -5px;
    785794    }
    786795
    787     input[type=radio],
    788     input[type=checkbox] {
     796    input[type="radio"],
     797    input[type="checkbox"] {
    789798        height: 25px;
    790799        width: 25px;
    791800    }
    792801
    793     .wp-admin p input[type=checkbox],
    794     .wp-admin p input[type=radio] {
     802    .wp-admin p input[type="checkbox"],
     803    .wp-admin p input[type="radio"] {
    795804        margin-top: -3px;
    796805    }
    797806
    798     input[type=radio]:checked:before {
     807    input[type="radio"]:checked:before {
    799808        vertical-align: middle;
    800809        width: 9px;
     
    804813    }
    805814
    806     .wp-upload-form input[type=submit] {
     815    .wp-upload-form input[type="submit"] {
    807816        margin-top: 10px;
    808817    }
     
    870879    }
    871880
    872     input[type=text].small-text,
    873     input[type=search].small-text,
    874     input[type=password].small-text,
    875     input[type=number].small-text,
     881    input[type="text"].small-text,
     882    input[type="search"].small-text,
     883    input[type="password"].small-text,
    876884    input[type="number"].small-text,
    877     .form-table input[type=text].small-text {
     885    input[type="number"].small-text,
     886    .form-table input[type="text"].small-text {
    878887        width: auto;
    879888        max-width: 55px;
Note: See TracChangeset for help on using the changeset viewer.