1/* Copyright (c) 2012 The Chromium Authors. All rights reserved. 2 * Use of this source code is governed by a BSD-style license that can be 3 * found in the LICENSE file. 4 */ 5 6/* This file defines styles for form controls. The order of rule blocks is 7 * important as there are some rules with equal specificity that rely on order 8 * as a tiebreaker. These are marked with OVERRIDE. 9 */ 10 11/* Default state **************************************************************/ 12 13button:not(.custom-appearance):not(.link-button), 14input[type='button']:not(.custom-appearance):not(.link-button), 15input[type='submit']:not(.custom-appearance):not(.link-button), 16select, 17input[type='checkbox'], 18input[type='radio'] { 19 -webkit-appearance: none; 20 -webkit-user-select: none; 21 background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede); 22 border: 1px solid rgba(0, 0, 0, 0.25); 23 border-radius: 2px; 24 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 25 inset 0 1px 2px rgba(255, 255, 255, 0.75); 26 color: #444; 27 font: inherit; 28 margin: 0 1px 0 0; 29 text-shadow: 0 1px 0 rgb(240, 240, 240); 30} 31 32button:not(.custom-appearance):not(.link-button), 33input[type='button']:not(.custom-appearance):not(.link-button), 34input[type='submit']:not(.custom-appearance):not(.link-button), 35select { 36 min-height: 2em; 37 min-width: 4em; 38<if expr="pp_ifdef('chromeos')"> 39 /* Without this rule, chromeos button text is too high on the button. */ 40 padding-top: 3px; 41</if> 42<if expr="is_win"> 43 /* The following platform-specific rule is necessary to get adjacent 44 * buttons, text inputs, and so forth to align on their borders while also 45 * aligning on the text's baselines. */ 46 padding-bottom: 1px; 47</if> 48} 49 50button:not(.custom-appearance):not(.link-button), 51input[type='button']:not(.custom-appearance):not(.link-button), 52input[type='submit']:not(.custom-appearance):not(.link-button) { 53 -webkit-padding-end: 10px; 54 -webkit-padding-start: 10px; 55} 56 57select { 58 -webkit-appearance: none; 59 -webkit-padding-end: 20px; 60 -webkit-padding-start: 6px; 61 /* OVERRIDE */ 62 background-image: url('../images/select.png'), 63 -webkit-linear-gradient(#ededed, #ededed 38%, #dedede); 64 background-position: right center; 65 background-repeat: no-repeat; 66} 67 68html[dir='rtl'] select { 69 background-position: center left; 70} 71 72input[type='checkbox'] { 73 bottom: 2px; 74 height: 13px; 75 position: relative; 76 vertical-align: middle; 77 width: 13px; 78} 79 80input[type='radio'] { 81 /* OVERRIDE */ 82 border-radius: 100%; 83 bottom: 3px; 84 height: 15px; 85 position: relative; 86 vertical-align: middle; 87 width: 15px; 88} 89 90/* TODO(estade): add more types here? */ 91input[type='password'], 92input[type='search'], 93input[type='text'], 94input[type='url'], 95input:not([type]) { 96 border: 1px solid #bfbfbf; 97 border-radius: 2px; 98 box-sizing: border-box; 99 color: #444; 100 font: inherit; 101 margin: 0; 102 /* Use min-height to accommodate addditional padding for touch as needed. */ 103 min-height: 2em; 104 padding: 3px; 105<if expr="is_win or is_macosx"> 106 /* For better alignment between adjacent buttons and inputs. */ 107 padding-bottom: 4px; 108</if> 109<if expr="pp_ifdef('chromeos')"> 110 /* For better alignment between adjacent buttons and inputs. */ 111 padding-bottom: 2px; 112</if> 113} 114 115input[type='search'] { 116 -webkit-appearance: textfield; 117 /* NOTE: Keep a relatively high min-width for this so we don't obscure the end 118 * of the default text in relatively spacious languages (i.e. German). */ 119 min-width: 160px; 120} 121 122/* Checked ********************************************************************/ 123 124input[type='checkbox']:checked::before { 125 -webkit-user-select: none; 126 background-image: url('../images/check.png'); 127 background-size: 100% 100%; 128 content: ''; 129 display: block; 130 height: 100%; 131 width: 100%; 132} 133 134html[dir='rtl'] input[type='checkbox']:checked::before { 135 -webkit-transform: scaleX(-1); 136} 137 138input[type='radio']:checked::before { 139 background-color: #666; 140 border-radius: 100%; 141 bottom: 25%; 142 content: ''; 143 display: block; 144 left: 25%; 145 position: absolute; 146 right: 25%; 147 top: 25%; 148} 149 150/* Hover **********************************************************************/ 151 152button:not(.custom-appearance):not(.link-button):enabled:hover, 153input[type='button']:not(.custom-appearance):not(.link-button):enabled:hover, 154input[type='submit']:not(.custom-appearance):not(.link-button):enabled:hover, 155select:enabled:hover, 156input[type='checkbox']:enabled:hover, 157input[type='radio']:enabled:hover { 158 background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0); 159 border-color: rgba(0, 0, 0, 0.3); 160 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), 161 inset 0 1px 2px rgba(255, 255, 255, 0.95); 162 color: black; 163} 164 165select:enabled:hover { 166 /* OVERRIDE */ 167 background-image: url('../images/select.png'), 168 -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0); 169} 170 171/* Active *********************************************************************/ 172 173button:not(.custom-appearance):not(.link-button):enabled:active, 174input[type='button']:not(.custom-appearance):not(.link-button):enabled:active, 175input[type='submit']:not(.custom-appearance):not(.link-button):enabled:active, 176select:enabled:active, 177input[type='checkbox']:enabled:active, 178input[type='radio']:enabled:active { 179 background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7); 180 box-shadow: none; 181 text-shadow: none; 182} 183 184select:enabled:active { 185 /* OVERRIDE */ 186 background-image: url('../images/select.png'), 187 -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7); 188} 189 190/* Disabled *******************************************************************/ 191 192button:not(.custom-appearance):not(.link-button):disabled, 193input[type='button']:not(.custom-appearance):not(.link-button):disabled, 194input[type='submit']:not(.custom-appearance):not(.link-button):disabled, 195select:disabled { 196 background-image: -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6); 197 border-color: rgba(80, 80, 80, 0.2); 198 box-shadow: 0 1px 0 rgba(80, 80, 80, 0.08), 199 inset 0 1px 2px rgba(255, 255, 255, 0.75); 200 color: #aaa; 201} 202 203select:disabled { 204 background-image: url('../images/disabled_select.png'), 205 -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6); 206} 207 208input[type='checkbox']:disabled, 209input[type='radio']:disabled { 210 opacity: .75; 211} 212 213input[type='password']:disabled, 214input[type='search']:disabled, 215input[type='text']:disabled, 216input[type='url']:disabled, 217input:not([type]):disabled { 218 color: #999; 219} 220 221/* Focus **********************************************************************/ 222 223button:not(.custom-appearance):not(.link-button):enabled:focus, 224input[type='button']:not(.custom-appearance):enabled:focus, 225input[type='checkbox']:enabled:focus, 226input[type='password']:enabled:focus, 227input[type='radio']:enabled:focus, 228input[type='search']:enabled:focus, 229input[type='submit']:not(.custom-appearance):enabled:focus, 230input[type='text']:enabled:focus, 231input[type='url']:enabled:focus, 232input:not([type]):enabled:focus, 233select:enabled:focus { 234 /* OVERRIDE */ 235 -webkit-transition: border-color 200ms; 236 /* We use border color because it follows the border radius (unlike outline). 237 * This is particularly noticeable on mac. */ 238 border-color: rgb(77, 144, 254); 239 outline: none; 240} 241 242/* Link buttons ***************************************************************/ 243 244.link-button { 245 -webkit-box-shadow: none; 246 background: transparent none; 247 border: none; 248 color: rgb(17, 85, 204); 249 cursor: pointer; 250 /* Input elements have -webkit-small-control which can override the body font. 251 * Resolve this by using 'inherit'. */ 252 font: inherit; 253 margin: 0; 254 padding: 0 4px; 255} 256 257.link-button:hover { 258 text-decoration: underline; 259} 260 261.link-button:active { 262 color: rgb(5, 37, 119); 263 text-decoration: underline; 264} 265 266.link-button[disabled] { 267 color: #999; 268 cursor: default; 269 text-decoration: none; 270} 271 272/* Checkbox/radio helpers ****************************************************** 273 * 274 * .checkbox and .radio classes wrap labels. Checkboxes and radios should use 275 * these classes with the markup structure: 276 * 277 * <div class="checkbox"> 278 * <label> 279 * <input type="checkbox"></input> 280 * <span> 281 * </label> 282 * </div> 283 */ 284 285.checkbox, 286.radio { 287 margin: 0.65em 0; 288} 289 290.checkbox label, 291.radio label { 292 /* Don't expand horizontally: <http://crbug.com/112091>. */ 293 display: -webkit-inline-box; 294} 295 296.checkbox label input ~ span, 297.radio label input ~ span { 298 -webkit-margin-start: 0.6em; 299 /* Make sure long spans wrap at the same horizontal position they start. */ 300 display: block; 301} 302 303.checkbox label:hover, 304.radio label:hover { 305 color: black; 306} 307 308label > input[type=checkbox]:disabled ~ span, 309label > input[type=radio]:disabled ~ span { 310 color: #999; 311} 312
