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
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.
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 ***** */
38 Styles for old GFX form widgets
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
{
47 height: 100%; /* Need this so percentage heights of kids work right */
50 /* miscellaneous form elements */
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
;
71 padding: 0.35em 0.625em 0.75em;
72 border: 2px groove ThreeDFace
;
79 /* default inputs, text inputs, and selects */
81 /* Note: Values in nsNativeTheme IsWidgetStyled function
82 need to match textfield background/border values here */
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) */
90 border: 2px inset ThreeDFace
;
91 background-color: -moz-Field
;
92 color: -moz-FieldText
;
94 text-rendering: optimizeLegibility
;
95 line-height: normal
!important
;
99 letter-spacing: normal
;
101 -moz-binding: url
("chrome://global/content/platformHTMLBindings.xml#inputFields");
103 -moz-user-select: text
;
107 input
> .anonymous-div
{
109 word-wrap: normal
!important
;
114 border: 2px inset ThreeDFace
;
115 background-color: -moz-Field
;
116 color: -moz-FieldText
;
117 font: medium
-moz-fixed
;
118 text-rendering: optimizeLegibility
;
120 text-transform: none
;
121 word-spacing: normal
;
122 letter-spacing: normal
;
123 vertical-align: text-bottom
;
125 -moz-binding: url
("chrome://global/content/platformHTMLBindings.xml#textAreas");
126 -moz-appearance: textfield-multiline
;
128 -moz-user-select: text
;
130 word-wrap: break-word
;
133 textarea
> scrollbar
{
137 textarea
> .anonymous-div
,
138 input
> .anonymous-div
{
140 border: 0px !important
;
141 /* The 1px horizontal padding is for parity with Win/IE */
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
;
150 input:-moz-read-write
,
151 textarea:-moz-read-write
{
152 -moz-user-modify: read-write
!important
;
157 border-color: ThreeDFace
;
158 background-color: -moz-Field
;
159 color: -moz-FieldText
;
161 line-height: normal
!important
;
162 white-space: nowrap
!important
;
163 word-wrap: normal
!important
;
166 -moz-box-sizing: border-box
;
167 -moz-user-select: none
;
168 -moz-appearance: menulist
;
172 overflow: -moz-hidden-unscrollable
;
176 /* Need the "select[size][multiple]" selector to override the settings on
177 'select[size="1"]', eg if one has <select size="1" 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
;
190 /* Except this is not a listbox */
191 vertical-align: baseline
;
193 -moz-appearance: menulist
;
196 select
> input
[type
="button"] {
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
;
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 */
232 -moz-padding-start: 4px;
234 background-color: 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
;
250 float: none
!important
;
251 position: static
!important
;
253 line-height: normal
!important
;
254 -moz-user-select: none
;
256 white-space: nowrap
!important
;
257 word-wrap: normal
!important
;
263 -moz-padding-start: 3px;
264 -moz-padding-end: 5px;
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
;
280 float: none
!important
;
281 position: static
!important
;
283 line-height: normal
!important
;
287 -moz-user-select: none
;
289 white-space: nowrap
!important
;
290 word-wrap: normal
!important
;
294 -moz-padding-start: 20px;
301 content: attr
(label
);
304 *|
*::-moz-dropdown-list
{
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
;
327 -moz-user-input: disabled
;
328 -moz-user-focus: ignore
;
330 background-color: ThreeDFace
;
336 background-color: transparent
;
340 input
[type
="hidden"] {
341 -moz-appearance: none
;
346 -moz-user-focus: ignore
;
351 input
[type
="image"] {
352 -moz-appearance: none
;
355 background-color: transparent
;
356 font-family: sans-serif
;
362 input
[type
="image"][disabled
] {
366 input
[type
="image"]:focus
{
367 /* Don't specify the outline-color, we should always use initial value. */
373 -moz-appearance: 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
;
387 letter-spacing: inherit
;
390 /* button part of file selector */
391 input
[type
="file"] > input
[type
="button"] {
394 letter-spacing: inherit
;
398 input
[type
="radio"] {
399 -moz-appearance: radio
;
402 margin: 3px 3px 0px 5px;
403 padding: 0 !important
;
407 -moz-border-radius: 100% !important
;
411 input
[type
="checkbox"] {
412 -moz-appearance: checkbox
;
415 margin: 3px 3px 3px 4px;
416 padding: 0 !important
;
420 -moz-border-radius: 0 !important
;
423 /* common features of radio buttons and check boxes */
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
{
443 border: 1px inset ThreeDShadow
! important
;
444 /* same as above, but !important */
445 color: GrayText
! important
;
446 background-color: ThreeDFace
! important
;
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
;
464 background-color: -moz-FieldText
! important
;
465 -moz-border-radius: 3px;
470 /* Note: Values in nsNativeTheme IsWidgetStyled function
471 need to match button background/border values here */
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
;
486 line-height: normal
!important
;
489 -moz-box-sizing: border-box
;
490 -moz-user-select: none
;
497 /* Buttons should lay out like "normal" html, mostly */
498 white-space: inherit
;
502 *|
*::-moz-button-content
{
507 input
[type
="reset"]:hover
,
508 input
[type
="button"]:hover
,
509 input
[type
="submit"]:hover
{
510 background-color: -moz-buttonhoverface
;
511 color: -moz-buttonhovertext
;
515 input
[type
="reset"]:active:hover
,
516 input
[type
="button"]:active:hover
,
517 input
[type
="submit"]:active:hover
{
518 padding: 0px 5px 0px 7px;
520 background-color: ButtonFace
;
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
;
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.
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
,
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
;
595 input
, textarea
, select
, button
{
596 -moz-user-input: none
!important
;
599 input
[type
="file"] { height: 2em; }
602 video
> xul|videocontrols
{
604 -moz-box-orient: vertical
;
605 -moz-binding: url
("chrome://global/content/bindings/videocontrols.xml#videoControls");
610 font: medium serif
; font-family: inherit
614 font: medium serif
; font-family: inherit
618 font: medium serif
; font-family: inherit
622 input
[type
="button"],
623 input
[type
="submit"] {
624 font: medium serif
; font-family: inherit