widgets.css revision 7dbb3d5cf0c15f500944d211057644d6a2f37371
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 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), 33select { 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 51select { 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 62html[dir='rtl'] select { 63 background-position: center left; 64} 65 66input[type='checkbox'] { 67 bottom: 2px; 68 height: 13px; 69 position: relative; 70 vertical-align: middle; 71 width: 13px; 72} 73 74input[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? */ 85input[type='number'], 86input[type='password'], 87input[type='search'], 88input[type='text'], 89input[type='url'], 90input:not([type]), 91textarea { 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 107input[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? */ 116input[type='search']::-webkit-textfield-decoration-container { 117 direction: inherit; 118} 119 120/* Checked ********************************************************************/ 121 122input[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 132input[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), 194select: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 202select:disabled { 203 /* OVERRIDE */ 204 background-image: url('../images/disabled_select.png'), 205 -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6); 206} 207 208input:disabled:-webkit-any([type='checkbox'], 209 [type='radio']) { 210 opacity: .75; 211} 212 213input: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 305label > input:disabled:-webkit-any([type='checkbox'], [type='radio']) ~ span { 306 color: #999; 307} 308