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):not(.link-button),
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);
27 text-shadow: 0 1px 0 rgb(240, 240, 240);
32 input[type='submit']):not(.custom-appearance):not(.link-button),
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. */
46 input[type='submit']):not(.custom-appearance):not(.link-button) {
47 -webkit-padding-end: 10px;
48 -webkit-padding-start: 10px;
52 -webkit-appearance: none;
53 -webkit-padding-end: 20px;
54 -webkit-padding-start: 6px;
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;
62 html[dir='rtl'] select {
63 background-position: center left;
66 input[type='checkbox'] {
70 vertical-align: middle;
80 vertical-align: middle;
84 /* TODO(estade): add more types here? */
86 input[type='password'],
92 border: 1px solid #bfbfbf;
94 box-sizing: border-box;
98 /* Use min-height to accommodate addditional padding for touch as needed. */
101 <if expr="is_win or is_macosx or is_ios">
102 /* For better alignment between adjacent buttons and inputs. */
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). */
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 {
120 /* Checked ********************************************************************/
122 input[type='checkbox']:checked::before {
123 -webkit-user-select: none;
124 background-image: url('../images/check.png');
125 background-size: 100% 100%;
132 input[type='radio']:checked::before {
133 background-color: #666;
144 /* Hover **********************************************************************/
146 :enabled:hover:-webkit-any(
148 input[type='checkbox'],
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);
161 :enabled:hover:-webkit-any(select) {
163 background-image: url('../images/select.png'),
164 -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
167 /* Active *********************************************************************/
169 :enabled:active:-webkit-any(
171 input[type='checkbox'],
175 input[type='button'],
176 input[type='submit']):not(.custom-appearance):not(.link-button)) {
177 background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
182 :enabled:active:-webkit-any(select) {
184 background-image: url('../images/select.png'),
185 -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
188 /* Disabled *******************************************************************/
190 :disabled:-webkit-any(
192 input[type='button'],
193 input[type='submit']):not(.custom-appearance):not(.link-button),
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);
204 background-image: url('../images/disabled_select.png'),
205 -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6);
208 input:disabled:-webkit-any([type='checkbox'],
213 input:disabled:-webkit-any([type='password'],
221 /* Focus **********************************************************************/
223 :enabled:focus:-webkit-any(
225 input[type='checkbox'],
226 input[type='number'],
227 input[type='password'],
229 input[type='search'],
235 input[type='button'],
236 input[type='submit']):not(.custom-appearance):not(.link-button)) {
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);
245 /* Link buttons ***************************************************************/
248 -webkit-box-shadow: none;
249 background: transparent none;
251 color: rgb(17, 85, 204);
253 /* Input elements have -webkit-small-control which can override the body font.
254 * Resolve this by using 'inherit'. */
261 text-decoration: underline;
264 .link-button:active {
265 color: rgb(5, 37, 119);
266 text-decoration: underline;
269 .link-button[disabled] {
272 text-decoration: none;
275 /* Checkbox/radio helpers ******************************************************
277 * .checkbox and .radio classes wrap labels. Checkboxes and radios should use
278 * these classes with the markup structure:
280 * <div class="checkbox">
282 * <input type="checkbox"></input>
288 :-webkit-any(.checkbox, .radio) label {
289 /* Don't expand horizontally: <http://crbug.com/112091>. */
290 display: -webkit-inline-box;
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. */
301 :-webkit-any(.checkbox, .radio) label:hover {
305 label > input:disabled:-webkit-any([type='checkbox'], [type='radio']) ~ span {