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