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
6/* This file defines styles for form controls. The order of rule blocks is
7 * important as there are some rules with equal specificity that rely on order
8 * as a tiebreaker. These are marked with OVERRIDE.
9 */
10
11/* Default state **************************************************************/
12
13:-webkit-any(button,
14             input[type='button'],
15             input[type='submit']):not(.custom-appearance):not(.link-button),
16select,
17input[type='checkbox'],
18input[type='radio'] {
19  -webkit-appearance: none;
20  -webkit-user-select: none;
21  background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
22  border: 1px solid rgba(0, 0, 0, 0.25);
23  border-radius: 2px;
24  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
25      inset 0 1px 2px rgba(255, 255, 255, 0.75);
26  color: #444;
27  font: inherit;
28  margin: 0 1px 0 0;
29  text-shadow: 0 1px 0 rgb(240, 240, 240);
30}
31
32:-webkit-any(button,
33             input[type='button'],
34             input[type='submit']):not(.custom-appearance):not(.link-button),
35select {
36  min-height: 2em;
37  min-width: 4em;
38<if expr="is_win">
39  /* The following platform-specific rule is necessary to get adjacent
40   * buttons, text inputs, and so forth to align on their borders while also
41   * aligning on the text's baselines. */
42  padding-bottom: 1px;
43</if>
44}
45
46:-webkit-any(button,
47             input[type='button'],
48             input[type='submit']):not(.custom-appearance):not(.link-button) {
49  -webkit-padding-end: 10px;
50  -webkit-padding-start: 10px;
51}
52
53select {
54  -webkit-appearance: none;
55  -webkit-padding-end: 20px;
56  -webkit-padding-start: 6px;
57  /* OVERRIDE */
58  background-image: url('../images/select.png'),
59      -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
60  background-position: right center;
61  background-repeat: no-repeat;
62}
63
64html[dir='rtl'] select {
65  background-position: center left;
66}
67
68input[type='checkbox'] {
69  bottom: 2px;
70  height: 13px;
71  position: relative;
72  vertical-align: middle;
73  width: 13px;
74}
75
76input[type='radio'] {
77  /* OVERRIDE */
78  border-radius: 100%;
79  bottom: 3px;
80  height: 15px;
81  position: relative;
82  vertical-align: middle;
83  width: 15px;
84}
85
86/* TODO(estade): add more types here? */
87input[type='password'],
88input[type='search'],
89input[type='text'],
90input[type='url'],
91input[type='number'],
92input:not([type]),
93textarea {
94  border: 1px solid #bfbfbf;
95  border-radius: 2px;
96  box-sizing: border-box;
97  color: #444;
98  font: inherit;
99  margin: 0;
100  /* Use min-height to accommodate addditional padding for touch as needed. */
101  min-height: 2em;
102  padding: 3px;
103<if expr="is_win or is_macosx">
104  /* For better alignment between adjacent buttons and inputs. */
105  padding-bottom: 4px;
106</if>
107}
108
109input[type='search'] {
110  -webkit-appearance: textfield;
111  /* NOTE: Keep a relatively high min-width for this so we don't obscure the end
112   * of the default text in relatively spacious languages (i.e. German). */
113  min-width: 160px;
114}
115
116/* Checked ********************************************************************/
117
118input[type='checkbox']:checked::before {
119  -webkit-user-select: none;
120  background-image: url('../images/check.png');
121  background-size: 100% 100%;
122  content: '';
123  display: block;
124  height: 100%;
125  width: 100%;
126}
127
128html[dir='rtl'] input[type='checkbox']:checked::before {
129  -webkit-transform: scaleX(-1);
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='password'],
227    input[type='radio'],
228    input[type='search'],
229    input[type='text'],
230    input[type='url'],
231    input:not([type]),
232    :-webkit-any(
233         button,
234         input[type='button'],
235         input[type='submit']):not(.custom-appearance):not(.link-button)) {
236  /* OVERRIDE */
237  -webkit-transition: border-color 200ms;
238  /* We use border color because it follows the border radius (unlike outline).
239   * This is particularly noticeable on mac. */
240  border-color: rgb(77, 144, 254);
241  outline: none;
242}
243
244/* Link buttons ***************************************************************/
245
246.link-button {
247  -webkit-box-shadow: none;
248  background: transparent none;
249  border: none;
250  color: rgb(17, 85, 204);
251  cursor: pointer;
252  /* Input elements have -webkit-small-control which can override the body font.
253   * Resolve this by using 'inherit'. */
254  font: inherit;
255  margin: 0;
256  padding: 0 4px;
257}
258
259.link-button:hover {
260  text-decoration: underline;
261}
262
263.link-button:active {
264  color: rgb(5, 37, 119);
265  text-decoration: underline;
266}
267
268.link-button[disabled] {
269  color: #999;
270  cursor: default;
271  text-decoration: none;
272}
273
274/* Checkbox/radio helpers ******************************************************
275 *
276 * .checkbox and .radio classes wrap labels. Checkboxes and radios should use
277 * these classes with the markup structure:
278 *
279 *   <div class="checkbox">
280 *     <label>
281 *       <input type="checkbox"></input>
282 *       <span>
283 *     </label>
284 *   </div>
285 */
286
287:-webkit-any(.checkbox, .radio) label {
288  /* Don't expand horizontally: <http://crbug.com/112091>. */
289  display: -webkit-inline-box;
290  padding-bottom: 7px;
291  padding-top: 7px;
292}
293
294:-webkit-any(.checkbox, .radio) label input ~ span {
295  -webkit-margin-start: 0.6em;
296  /* Make sure long spans wrap at the same horizontal position they start. */
297  display: block;
298}
299
300:-webkit-any(.checkbox, .radio) label:hover {
301  color: black;
302}
303
304label > input:disabled:-webkit-any([type='checkbox'], [type='radio']) ~ span {
305  color: #999;
306}
307