Bug 460926 A11y hierachy is broken on Ubuntu 8.10 (GNOME 2.24), r=Evan.Yan sr=roc
[wine-gecko.git] / layout / style / forms.css
blobd935d07f472df62e43510ab68f02e960eb22c240
1 /* ***** BEGIN LICENSE BLOCK *****
2 * Version: MPL 1.1/GPL 2.0/LGPL 2.1
4 * The contents of this file are subject to the Mozilla Public License Version
5 * 1.1 (the "License"); you may not use this file except in compliance with
6 * the License. You may obtain a copy of the License at
7 * http://www.mozilla.org/MPL/
9 * Software distributed under the License is distributed on an "AS IS" basis,
10 * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
11 * for the specific language governing rights and limitations under the
12 * License.
14 * The Original Code is mozilla.org code.
16 * The Initial Developer of the Original Code is
17 * Netscape Communications Corporation.
18 * Portions created by the Initial Developer are Copyright (C) 1998
19 * the Initial Developer. All Rights Reserved.
21 * Contributor(s):
23 * Alternatively, the contents of this file may be used under the terms of
24 * either of the GNU General Public License Version 2 or later (the "GPL"),
25 * or the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
26 * in which case the provisions of the GPL or the LGPL are applicable instead
27 * of those above. If you wish to allow use of your version of this file only
28 * under the terms of either the GPL or the LGPL, and not to allow others to
29 * use your version of this file under the terms of the MPL, indicate your
30 * decision by deleting the provisions above and replace them with the notice
31 * and other provisions required by the GPL or the LGPL. If you do not delete
32 * the provisions above, a recipient may use your version of this file under
33 * the terms of any one of the MPL, the GPL or the LGPL.
35 * ***** END LICENSE BLOCK ***** */
37 /**
38 Styles for old GFX form widgets
39 **/
42 @namespace url(http://www.w3.org/1999/xhtml); /* set default namespace to HTML */
43 @namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
45 *|*::-moz-fieldset-content {
46 display: block;
47 height: 100%; /* Need this so percentage heights of kids work right */
50 /* miscellaneous form elements */
52 legend {
53 padding-left: 2px;
54 padding-right: 2px;
55 border: none;
56 position: static ! important;
57 float: none ! important;
58 width: -moz-fit-content ! important;
59 min-width: 0 ! important;
60 max-width: none ! important;
61 height: auto ! important;
62 min-height: 0 ! important;
63 max-height: none ! important;
64 white-space: nowrap;
67 fieldset {
68 display: block;
69 margin-left: 2px;
70 margin-right: 2px;
71 padding: 0.35em 0.625em 0.75em;
72 border: 2px groove ThreeDFace;
75 label {
76 cursor: default;
79 /* default inputs, text inputs, and selects */
81 /* Note: Values in nsNativeTheme IsWidgetStyled function
82 need to match textfield background/border values here */
84 input {
85 -moz-appearance: textfield;
86 /* The sum of border-top, border-bottom, padding-top, padding-bottom
87 must be the same here, for buttons, and for <select> (including its
88 internal padding magic) */
89 padding: 1px 0 1px 0;
90 border: 2px inset ThreeDFace;
91 background-color: -moz-Field;
92 color: -moz-FieldText;
93 font: -moz-field;
94 text-rendering: optimizeLegibility;
95 line-height: normal !important;
96 text-align: start;
97 text-transform: none;
98 word-spacing: normal;
99 letter-spacing: normal;
100 cursor: text;
101 -moz-binding: url("chrome://global/content/platformHTMLBindings.xml#inputFields");
102 text-indent: 0;
103 -moz-user-select: text;
104 text-shadow: none;
107 input > .anonymous-div {
108 white-space: pre;
109 word-wrap: normal !important;
112 textarea {
113 margin: 1px 0 1px 0;
114 border: 2px inset ThreeDFace;
115 background-color: -moz-Field;
116 color: -moz-FieldText;
117 font: medium -moz-fixed;
118 text-rendering: optimizeLegibility;
119 text-align: start;
120 text-transform: none;
121 word-spacing: normal;
122 letter-spacing: normal;
123 vertical-align: text-bottom;
124 cursor: text;
125 -moz-binding: url("chrome://global/content/platformHTMLBindings.xml#textAreas");
126 -moz-appearance: textfield-multiline;
127 text-indent: 0;
128 -moz-user-select: text;
129 text-shadow: none;
130 word-wrap: break-word;
133 textarea > scrollbar {
134 cursor: default;
137 textarea > .anonymous-div,
138 input > .anonymous-div {
139 overflow: auto;
140 border: 0px !important;
141 /* The 1px horizontal padding is for parity with Win/IE */
142 padding: 0px 1px;
143 margin: 0px;
144 /* XXXldb I'm not sure if we really want the 'text-decoration: inherit',
145 but it's needed to make 'text-decoration' "work" on text inputs. */
146 text-decoration: inherit;
147 ime-mode: inherit;
150 input:-moz-read-write,
151 textarea:-moz-read-write {
152 -moz-user-modify: read-write !important;
155 select {
156 margin: 0;
157 border-color: ThreeDFace;
158 background-color: -moz-Field;
159 color: -moz-FieldText;
160 font: -moz-list;
161 line-height: normal !important;
162 white-space: nowrap !important;
163 word-wrap: normal !important;
164 text-align: start;
165 cursor: default;
166 -moz-box-sizing: border-box;
167 -moz-user-select: none;
168 -moz-appearance: menulist;
169 border-width: 2px;
170 border-style: inset;
171 text-indent: 0;
172 overflow: -moz-hidden-unscrollable;
173 text-shadow: none;
176 /* Need the "select[size][multiple]" selector to override the settings on
177 'select[size="1"]', eg if one has <select size="1" multiple> */
179 select[size],
180 select[multiple],
181 select[size][multiple] {
182 /* Different alignment and padding for listbox vs combobox */
183 vertical-align: text-bottom;
184 padding: 1px 0 1px 0;
185 -moz-appearance: listbox;
188 select[size="0"],
189 select[size="1"] {
190 /* Except this is not a listbox */
191 vertical-align: baseline;
192 padding: 0;
193 -moz-appearance: menulist;
196 select > input[type="button"] {
197 width: 12px;
198 height: 12px;
199 white-space: nowrap;
200 position: static !important;
201 background-image: url("arrow.gif") !important;
202 background-repeat: no-repeat !important;
203 background-position: center !important;
204 -moz-appearance: menulist-button;
206 /* Make sure to size correctly if the combobox has a non-auto height. */
207 height: 100% ! important;
208 -moz-box-sizing: border-box ! important;
211 Make sure to align properly with the display frame. Note that we
212 want the baseline of the combobox to match the baseline of the
213 display frame, so the dropmarker is what gets the vertical-align.
215 vertical-align: top !important;
218 select > input[type="button"]:active {
219 background-image: url("arrowd.gif") !important;
222 select:empty {
223 width: 2.5em;
226 *|*::-moz-display-comboboxcontrol-frame {
227 overflow: -moz-hidden-unscrollable;
228 /* This top/bottom padding plus the combobox top/bottom border need to
229 add up to the top/bottom borderpadding of text inputs and buttons */
230 padding-top: 1px;
231 padding-bottom: 1px;
232 -moz-padding-start: 4px;
233 -moz-padding-end: 0;
234 background-color: inherit;
235 color: inherit;
236 white-space: nowrap;
237 text-align: inherit;
238 -moz-user-select: none;
239 /* Make sure to size correctly if the combobox has a non-auto height. */
240 height: 100% ! important;
241 -moz-box-sizing: border-box ! important;
244 select::-moz-scrolled-content {
245 display: block !important;
248 option {
249 display: block;
250 float: none !important;
251 position: static !important;
252 min-height: 1em;
253 line-height: normal !important;
254 -moz-user-select: none;
255 text-indent: 0;
256 white-space: nowrap !important;
257 word-wrap: normal !important;
260 select > option {
261 padding-top : 0;
262 padding-bottom: 0;
263 -moz-padding-start: 3px;
264 -moz-padding-end: 5px;
267 option:checked {
268 background-color: -moz-html-cellhighlight !important;
269 color: -moz-html-cellhighlighttext !important;
272 select:focus > option:checked,
273 select:focus > optgroup > option:checked {
274 background-color: Highlight ! important;
275 color: HighlightText ! important;
278 optgroup {
279 display: block;
280 float: none !important;
281 position: static !important;
282 font: -moz-list;
283 line-height: normal !important;
284 font-style: italic;
285 font-weight: bold;
286 font-size: inherit;
287 -moz-user-select: none;
288 text-indent: 0;
289 white-space: nowrap !important;
290 word-wrap: normal !important;
293 optgroup > option {
294 -moz-padding-start: 20px;
295 font-style: normal;
296 font-weight: normal;
299 optgroup:before {
300 display: block;
301 content: attr(label);
304 *|*::-moz-dropdown-list {
305 z-index: 2147483647;
306 background-color: inherit;
307 -moz-user-select: none;
308 position: static !important;
309 float: none !important;
312 * We can't change the padding here, because that would affect our
313 * intrinsic width, since we scroll. But at the same time, we want
314 * to make sure that our left border+padding matches the left
315 * border+padding of a combobox so that our scrollbar will line up
316 * with the dropmarker. So set our left border to 2px.
318 border: 1px outset black !important;
319 border-left-width: 2px ! important;
322 input[disabled],
323 textarea[disabled],
324 option[disabled],
325 optgroup[disabled],
326 select[disabled] {
327 -moz-user-input: disabled;
328 -moz-user-focus: ignore;
329 color: GrayText;
330 background-color: ThreeDFace;
331 cursor: inherit;
334 option[disabled],
335 optgroup[disabled] {
336 background-color: transparent;
339 /* hidden inputs */
340 input[type="hidden"] {
341 -moz-appearance: none;
342 display: none;
343 padding: 0;
344 border: 0;
345 cursor: auto;
346 -moz-user-focus: ignore;
347 -moz-binding: none;
350 /* image buttons */
351 input[type="image"] {
352 -moz-appearance: none;
353 padding: 0;
354 border: none;
355 background-color: transparent;
356 font-family: sans-serif;
357 font-size: small;
358 cursor: pointer;
359 -moz-binding: none;
362 input[type="image"][disabled] {
363 cursor: inherit;
366 input[type="image"]:focus {
367 /* Don't specify the outline-color, we should always use initial value. */
368 outline: 1px dotted;
371 /* file selector */
372 input[type="file"] {
373 -moz-appearance: none;
374 white-space: nowrap;
375 cursor: default;
376 -moz-binding: none;
378 padding: 0 !important;
379 border-style: none !important;
382 input[type="file"] > input[type="text"] {
383 border-color: inherit;
384 background-color: inherit;
385 color: inherit;
386 font-size: inherit;
387 letter-spacing: inherit;
390 /* button part of file selector */
391 input[type="file"] > input[type="button"] {
392 height: inherit;
393 font-size: inherit;
394 letter-spacing: inherit;
397 /* radio buttons */
398 input[type="radio"] {
399 -moz-appearance: radio;
400 width: 13px;
401 height: 13px;
402 margin: 3px 3px 0px 5px;
403 padding: 0 !important;
404 cursor: default;
405 -moz-binding: none;
407 -moz-border-radius: 100% !important;
410 /* check boxes */
411 input[type="checkbox"] {
412 -moz-appearance: checkbox;
413 width: 13px;
414 height: 13px;
415 margin: 3px 3px 3px 4px;
416 padding: 0 !important;
417 cursor: default;
418 -moz-binding: none;
420 -moz-border-radius: 0 !important;
423 /* common features of radio buttons and check boxes */
425 input[type="radio"],
426 input[type="checkbox"] {
427 /* same colors as |input| rule, but |!important| this time. */
428 -moz-box-sizing: border-box;
429 background-color: -moz-Field ! important;
430 color: -moz-FieldText ! important;
431 border: 2px inset ThreeDFace ! important;
434 input[type="radio"][disabled],
435 input[type="radio"][disabled]:active,
436 input[type="radio"][disabled]:hover,
437 input[type="radio"][disabled]:hover:active,
438 input[type="checkbox"][disabled],
439 input[type="checkbox"][disabled]:active,
440 input[type="checkbox"][disabled]:hover,
441 input[type="checkbox"][disabled]:hover:active {
442 padding: 1px;
443 border: 1px inset ThreeDShadow ! important;
444 /* same as above, but !important */
445 color: GrayText ! important;
446 background-color: ThreeDFace ! important;
447 cursor: inherit;
450 input[type="checkbox"]:focus,
451 input[type="radio"]:focus {
452 border-style: groove !important;
455 input[type="checkbox"]:hover:active,
456 input[type="radio"]:hover:active {
457 background-color: ThreeDFace ! important;
458 border-style: inset !important;
461 *|*::-moz-radio {
462 width: 4px;
463 height: 4px;
464 background-color: -moz-FieldText ! important;
465 -moz-border-radius: 3px;
468 /* buttons */
470 /* Note: Values in nsNativeTheme IsWidgetStyled function
471 need to match button background/border values here */
473 button,
474 input[type="reset"],
475 input[type="button"],
476 input[type="submit"] {
477 -moz-appearance: button;
478 /* The sum of border-top, border-bottom, padding-top, padding-bottom
479 must be the same here, for text inputs, and for <select>. For
480 buttons, make sure to include the -moz-focus-inner border/padding. */
481 padding: 0px 6px 0px 6px;
482 border: 2px outset ButtonFace;
483 background-color: ButtonFace;
484 color: ButtonText;
485 font: -moz-button;
486 line-height: normal !important;
487 white-space: pre;
488 cursor: default;
489 -moz-box-sizing: border-box;
490 -moz-user-select: none;
491 -moz-binding: none;
492 text-align: center;
493 text-shadow: none;
496 button {
497 /* Buttons should lay out like "normal" html, mostly */
498 white-space: inherit;
499 text-indent: 0;
502 *|*::-moz-button-content {
503 display: block;
506 button:hover,
507 input[type="reset"]:hover,
508 input[type="button"]:hover,
509 input[type="submit"]:hover {
510 background-color: -moz-buttonhoverface;
511 color: -moz-buttonhovertext;
514 button:active:hover,
515 input[type="reset"]:active:hover,
516 input[type="button"]:active:hover,
517 input[type="submit"]:active:hover {
518 padding: 0px 5px 0px 7px;
519 border-style: inset;
520 background-color: ButtonFace;
521 color: ButtonText;
524 button::-moz-focus-inner,
525 input[type="reset"]::-moz-focus-inner,
526 input[type="button"]::-moz-focus-inner,
527 input[type="submit"]::-moz-focus-inner,
528 input[type="file"] > input[type="button"]::-moz-focus-inner {
529 padding: 0px 2px 0px 2px;
530 border: 1px dotted transparent;
533 button:focus::-moz-focus-inner,
534 input[type="reset"]:focus::-moz-focus-inner,
535 input[type="button"]:focus::-moz-focus-inner,
536 input[type="submit"]:focus::-moz-focus-inner,
537 input[type="file"] > input[type="button"]:focus::-moz-focus-inner {
538 border-color: ButtonText;
541 button[disabled]:active, button[disabled],
542 input[type="reset"][disabled]:active,
543 input[type="reset"][disabled],
544 input[type="button"][disabled]:active,
545 input[type="button"][disabled],
546 select[disabled] > input[type="button"],
547 select[disabled] > input[type="button"]:active,
548 input[type="submit"][disabled]:active,
549 input[type="submit"][disabled] {
550 /* The sum of border-top, border-bottom, padding-top, padding-bottom
551 must be the same here and for text inputs */
552 padding: 0px 6px 0px 6px;
553 border: 2px outset ButtonFace;
554 color: GrayText;
555 cursor: inherit;
559 * Make form controls inherit 'unicode-bidi' transparently as required by
560 * their various anonymous descendants and pseudo-elements:
562 * <textarea> and <input type="text">:
563 * inherit into the XULScroll frame with class 'anonymous-div' which is a
564 * child of the text control.
566 * Buttons (either <button>, <input type="submit">, <input type="button">
567 * or <input type="reset">)
568 * inherit into the ':-moz-button-content' pseudo-element.
570 * <select>:
571 * inherit into the ':-moz-display-comboboxcontrol-frame' pseudo-element and
572 * the <optgroup>'s ':before' pseudo-element, which is where the label of
573 * the <optgroup> gets displayed. The <option>s don't use anonymous boxes,
574 * so they need no special rules.
576 textarea > .anonymous-div,
577 input > .anonymous-div,
578 *|*::-moz-button-content,
579 *|*::-moz-display-comboboxcontrol-frame,
580 optgroup:before {
581 unicode-bidi: inherit;
585 * Force the text control child of file input controls to have left-to-right
586 * directionality. Otherwise filenames containing right-to-left characters
587 * will be reordered with chaotic results.
589 input[type="file"] > input[type="text"] {
590 direction: ltr !important;
591 text-align: inherit;
594 @media print {
595 input, textarea, select, button {
596 -moz-user-input: none !important;
599 input[type="file"] { height: 2em; }
602 video > xul|videocontrols {
603 display: -moz-box;
604 -moz-box-orient: vertical;
605 -moz-binding: url("chrome://global/content/bindings/videocontrols.xml#videoControls");
608 %if OSARCH==OS2
609 input {
610 font: medium serif; font-family: inherit
613 select {
614 font: medium serif; font-family: inherit
617 optgroup {
618 font: medium serif; font-family: inherit
621 input[type="reset"],
622 input[type="button"],
623 input[type="submit"] {
624 font: medium serif; font-family: inherit
627 %endif