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