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), 14 select, 15 input[type='checkbox'], 16 input[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), 34 select { 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 52 select { 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 63 html[dir='rtl'] select { 64 background-position: center left; 65 } 66 67 input[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 80 input[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? */ 91 input[type='number'], 92 input[type='password'], 93 input[type='search'], 94 input[type='text'], 95 input[type='url'], 96 input:not([type]), 97 textarea { 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 114 input[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? */ 123 input[type='search']::-webkit-textfield-decoration-container { 124 direction: inherit; 125 } 126 127 /* Checked ********************************************************************/ 128 129 input[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 139 input[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), 201 select: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 209 select:disabled { 210 /* OVERRIDE */ 211 background-image: url('../images/disabled_select.png'), 212 -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6); 213 } 214 215 input:disabled:-webkit-any([type='checkbox'], 216 [type='radio']) { 217 opacity: .75; 218 } 219 220 input: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 313 label > input:disabled:-webkit-any([type='checkbox'], [type='radio']) ~ span { 314 color: #999; 315 } 316
