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. */
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. */
9 /* Default state **************************************************************/
13 input[type='submit']):not(.custom-appearance),
15 input[type='checkbox'],
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);
22 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
23 inset 0 1px 2px rgba(255, 255, 255, 0.75);
28 text-shadow: 0 1px 0 rgb(240, 240, 240);
33 input[type='submit']):not(.custom-appearance),
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. */
47 input[type='submit']):not(.custom-appearance) {
48 -webkit-padding-end: 10px;
49 -webkit-padding-start: 10px;
53 -webkit-appearance: none;
54 -webkit-padding-end: 20px;
55 -webkit-padding-start: 6px;
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;
63 html[dir='rtl'] select {
64 background-position: center left;
67 input[type='checkbox'] {
71 <if expr="not chromeos">
76 vertical-align: middle;
86 vertical-align: middle;
90 /* TODO(estade): add more types here? */
92 input[type='password'],
98 border: 1px solid #bfbfbf;
100 box-sizing: border-box;
104 /* Use min-height to accommodate addditional padding for touch as needed. */
108 <if expr="is_win or is_macosx or is_ios">
109 /* For better alignment between adjacent buttons and inputs. */
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). */
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 {
127 /* Checked ********************************************************************/
129 input[type='checkbox']:checked::before {
130 -webkit-user-select: none;
131 background-image: url('../images/check.png');
132 background-size: 100% 100%;
139 input[type='radio']:checked::before {
140 background-color: #666;
151 /* Hover **********************************************************************/
153 :enabled:hover:-webkit-any(
155 input[type='checkbox'],
159 input[type='button'],
160 input[type='submit']):not(.custom-appearance)) {
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);
168 :enabled:hover:-webkit-any(select) {
170 background-image: url('../images/select.png'),
171 -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
174 /* Active *********************************************************************/
176 :enabled:active:-webkit-any(
178 input[type='checkbox'],
182 input[type='button'],
183 input[type='submit']):not(.custom-appearance)) {
184 background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
189 :enabled:active:-webkit-any(select) {
191 background-image: url('../images/select.png'),
192 -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
195 /* Disabled *******************************************************************/
197 :disabled:-webkit-any(
199 input[type='button'],
200 input[type='submit']):not(.custom-appearance),
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);
211 background-image: url('../images/disabled_select.png'),
212 -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6);
215 input:disabled:-webkit-any([type='checkbox'],
220 input:disabled:-webkit-any([type='password'],
228 /* Focus **********************************************************************/
230 :enabled:focus:-webkit-any(
232 input[type='checkbox'],
233 input[type='number'],
234 input[type='password'],
236 input[type='search'],
242 input[type='button'],
243 input[type='submit']):not(.custom-appearance)) {
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);
252 /* Action links ***************************************************************/
256 display: inline-block;
258 text-decoration: none;
261 [is='action-link']:hover {
262 text-decoration: underline;
265 [is='action-link']:active {
266 color: rgb(5, 37, 119);
267 text-decoration: underline;
270 [is='action-link'][disabled] {
273 text-decoration: none;
276 /* Checkbox/radio helpers ******************************************************
278 * .checkbox and .radio classes wrap labels. Checkboxes and radios should use
279 * these classes with the markup structure:
281 * <div class="checkbox">
283 * <input type="checkbox"></input>
289 :-webkit-any(.checkbox, .radio) label {
290 /* Don't expand horizontally: <http://crbug.com/112091>. */
291 display: -webkit-inline-box;
296 :-webkit-any(.checkbox, .radio) label input ~ span {
297 -webkit-margin-start: 0.6em;
298 -webkit-user-select: none;
299 /* Make sure long spans wrap at the same horizontal position they start. */
303 :-webkit-any(.checkbox, .radio) label:hover {
307 label > input:disabled:-webkit-any([type='checkbox'], [type='radio']) ~ span {