1 /* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
6 Styles for old GFX form widgets
10 @namespace url
(http://www
.w3
.org
/1999/xhtml
); /* set default namespace to HTML */
12 *|
*::-moz-fieldset-content
{
13 display: block
; /* StyleAdjuster::adjust_for_fieldset_content overrides this in some cases */
14 unicode-bidi: inherit
;
15 text-overflow: inherit
;
17 overflow-clip-box: inherit
;
19 /* Need to inherit border-radius too, so when the fieldset has rounded
20 borders we don't leak out the corners for hit-testing purposes. */
21 border-radius: inherit
;
23 box-decoration-break: inherit
;
24 block-size: 100%; /* Need this so percentage block-sizes of kids work right */
25 /* Please keep the declarations below in sync with ::-moz-scrolled-content in
26 ua.css and ::-moz-button-content below. */
28 /* Multicol container */
29 column-count: inherit
;
30 column-width: inherit
;
35 flex-direction: inherit
;
37 /* -webkit-box container (aliased from -webkit versions to -moz versions) */
38 -moz-box-orient: inherit
;
39 -moz-box-direction: inherit
;
40 -moz-box-pack: inherit
;
41 -moz-box-align: inherit
;
43 grid-auto-columns: inherit
;
44 grid-auto-rows: inherit
;
45 grid-auto-flow: inherit
;
46 grid-column-gap: inherit
;
47 grid-row-gap: inherit
;
48 grid-template-areas: inherit
;
49 grid-template-columns: inherit
;
50 grid-template-rows: inherit
;
52 align-content: inherit
;
54 justify-content: inherit
;
55 justify-items: inherit
;
58 /* Miscellaneous form elements */
68 padding-block: 0.35em 0.625em;
69 padding-inline: 0.75em;
70 border: 2px groove ThreeDFace
;
71 min-inline-size: min-content
;
78 /* Default inputs, text inputs, and selects */
80 /* Note: Values in nsNativeTheme IsWidgetStyled function
81 need to match textfield background/border values here */
84 display: inline-block
;
86 -moz-default-appearance: textfield
;
87 /* The sum of border and padding on block-start and block-end
88 must be the same here, for buttons, and for <select> */
91 border: 2px inset ButtonBorder
;
92 background-color: Field
;
95 text-rendering: optimizeLegibility
;
97 overflow-clip-box: padding-box content-box
;
101 display: inline-block
;
103 -moz-default-appearance: textarea
;
105 border: 2px inset ButtonBorder
;
107 background-color: Field
;
109 font: medium
-moz-fixed
;
110 text-rendering: optimizeLegibility
;
111 vertical-align: text-bottom
;
114 white-space: pre-wrap
;
115 word-wrap: break-word
;
118 /* A few properties that we don't want to inherit by default: */
119 input
, textarea
, select
, button
, ::file-selector-button
{
121 text-indent: initial
;
122 text-shadow: initial
;
123 text-transform: initial
;
124 word-spacing: initial
;
125 letter-spacing: initial
;
126 /* Note that line-height is also reset for all these, via the font shorthand */
130 ::-moz-text-control-editing-root
,
131 ::-moz-text-control-preview
{
134 /* This is necessary to make overflow-clip-box work */
137 text-decoration: inherit
;
138 display: inline-block
;
141 scrollbar-width: inherit
;
142 -moz-control-character-visibility: visible
;
143 overflow-clip-box: inherit
;
148 ::-moz-text-control-preview
{
150 * Changing display to inline can leads to broken behaviour and will assert.
152 display: inline-block
;
155 * Changing resize would display a broken behaviour and will assert.
162 * The placeholder or preview should be ignored by pointer / selection / etc.
163 * Otherwise, we might have some unexpected behavior like the resize handle
164 * not being selectable.
166 pointer-events: none
;
170 ::-moz-text-control-preview
{
171 font-family: system-ui
;
178 :not
(:-moz-autofill-preview
)::-moz-text-control-editing-root
,
179 :placeholder-shown:not
(:autofill
)::placeholder
,
180 :autofill::-moz-text-control-preview
{
185 input::-moz-text-control-editing-root
,
186 input::-moz-text-control-preview
{
189 /* Make the line-height equal to the available height */
190 line-height: -moz-block-height
!important
;
193 input
[type
=password
]::-moz-text-control-editing-root
,
194 input
[type
=password
]::-moz-text-control-preview
{
196 * In password fields, any character should be put same direction. Otherwise,
197 * caret position at typing tells everybody whether the character is an RTL
198 * or an LTR character. Unfortunately, this makes odd rendering when bidi
201 unicode-bidi: bidi-override
;
204 textarea::-moz-text-control-editing-root
{
205 scroll-behavior: inherit
;
206 overscroll-behavior: inherit
;
207 /* StyleAdjuster makes sure that the overflow value ends up being scrollable */
212 textarea:read-write
{
213 -moz-user-modify: read-write
!important
;
218 border-color: ButtonBorder
;
220 white-space: nowrap
!important
;
221 word-wrap: normal
!important
;
223 box-sizing: border-box
;
228 /* No text-decoration reaching inside, by default */
229 display: inline-block
;
230 page-break-inside: avoid
;
231 overflow-clip-box: padding-box
!important
; /* bug 992447 */
234 /* Set some styles for drop down selects. These are overridden below for
235 * list box selects. */
237 background-color: -moz-Combobox
;
238 color: -moz-ComboboxText
;
239 vertical-align: baseline
;
241 -moz-default-appearance: menulist
;
244 select:-moz-select-list-box
{
245 overflow-inline: hidden
;
246 overflow-block: scroll
;
248 background-color: Field
;
250 vertical-align: text-bottom
;
252 -moz-default-appearance: listbox
;
255 @media (-moz-platform: macos
) {
256 select:-moz-select-list-box
{
257 scrollbar-width: thin
;
265 -moz-default-appearance: -moz-menulist-arrow-button
;
267 /* Draw the arrow in the select's color */
270 /* We don't want the button to grow the line-height */
272 max-block-size: 100%;
274 /* Make sure to align properly with the display frame. Note that we want the
275 * baseline of the combobox to match the baseline of the label, so the
276 * dropmarker is what gets the vertical-align. */
281 display: inline-block
;
285 option
[label
]::before
{
286 content: attr
(label
);
289 select:-moz-select-list-box option
,
290 select:-moz-select-list-box optgroup
{
291 line-height: normal
!important
;
296 float: none
!important
;
297 position: static
!important
;
298 /* This makes sure that it is a containing block for positioned descendants. */
299 will-change: -moz-fixed-pos-containing-block
!important
;
305 * Note that the "UA !important" tests in
306 * layout/style/test/test_animations.html depend on this rule, because
307 * they need some UA !important rule to test. If this changes, use a
308 * different one there.
310 white-space: nowrap
!important
;
311 word-wrap: normal
!important
;
319 background-color: -moz-cellhighlight
;
320 color: -moz-cellhighlighttext
;
323 select:-moz-select-list-box:focus
option:checked
{
324 background-color: SelectedItem
!important
;
325 color: SelectedItemText
!important
;
330 float: none
!important
;
331 position: static
!important
;
336 white-space: nowrap
!important
;
337 word-wrap: normal
!important
;
341 padding-inline-start: 20px;
348 content: "\200b" attr
(label
);
351 @media (-moz-platform: android
) {
352 /* These elements are handled by the prompt module. */
355 pointer-events: none
;
359 *|
*::-moz-dropdown-list
{
362 background-color: inherit
;
364 position: static
!important
;
365 float: none
!important
;
368 * We can't change the padding here, because that would affect our
369 * intrinsic inline-size, since we scroll. But at the same time, we want
370 * to make sure that our inline-start border+padding matches the inline-start
371 * border+padding of a combobox so that our scrollbar will line up
372 * with the dropmarker. So set our inline-start border to 2px.
374 border: 1px outset black
!important
;
375 border-inline-start-width: 2px !important
;
384 background-color: -moz-DisabledField
;
395 background-color: transparent
;
401 -moz-default-appearance: none
;
402 display: none
!important
;
406 -moz-user-focus: ignore
;
412 -moz-default-appearance: none
;
415 background-color: transparent
;
416 font-family: sans-serif
;
421 input
[type
=image
]:disabled
{
425 /* colored part of the color selector button */
426 ::-moz-color-swatch
{
432 box-sizing: border-box
;
433 border: 1px solid grey
;
440 -moz-default-appearance: radio
;
442 margin-inline: 5px 3px;
446 input
[type
=checkbox
] {
448 -moz-default-appearance: checkbox
;
450 margin-inline: 4px 3px;
453 /* Common features of radio buttons and check boxes */
456 input
[type
=checkbox
] {
457 box-sizing: border-box
;
459 /* unset some values from the general 'input' rule above: */
462 background-color: unset
;
466 input:is
([type
=radio
], [type
=checkbox
]):is
(:disabled
, :disabled:active
, :disabled:hover:active
) {
471 box-sizing: border-box
;
476 /* Note: Values in nsNativeTheme IsWidgetStyled function
477 need to match button background/border values here */
479 /* Non text-related properties for buttons: these ones are shared with
482 ::file-selector-button
,
483 input:is
([type
=color
], [type
=reset
], [type
=button
], [type
=submit
]) {
485 -moz-default-appearance: button
;
486 /* The sum of border and padding on block-start and block-end
487 must be the same here, for text inputs, and for <select>.
488 Note -moz-focus-inner padding does not affect button size. */
491 border: 2px outset ButtonBorder
;
492 background-color: ButtonFace
;
494 box-sizing: border-box
;
496 overflow-clip-box: padding-box
;
499 /* Text-related properties for buttons: these ones are not shared with
502 ::file-selector-button
,
503 input:is
([type
=reset
], [type
=button
], [type
=submit
]) {
517 /* https://github.com/whatwg/html/issues/9976 */
518 input:not
([type
=image i
], [type
=range i
], [type
=checkbox i
], [type
=radio i
]) {
519 overflow: clip
!important
;
520 overflow-clip-margin: 0px !important
;
524 ::file-selector-button
{
525 /* Buttons should lay out like "normal" html, mostly */
527 /* But no text-decoration reaching inside, by default */
528 display: inline-block
;
531 *|
*::-moz-button-content
{
533 /* Please keep the declarations below in sync with ::-moz-scrolled-content in
534 ua.css and ::-moz-fieldset-content above. */
536 /* Multicol container */
537 column-count: inherit
;
538 column-width: inherit
;
540 column-rule: inherit
;
541 column-fill: inherit
;
543 flex-direction: inherit
;
545 /* -webkit-box container (aliased from -webkit versions to -moz versions) */
546 -moz-box-orient: inherit
;
547 -moz-box-direction: inherit
;
548 -moz-box-pack: inherit
;
549 -moz-box-align: inherit
;
551 grid-auto-columns: inherit
;
552 grid-auto-rows: inherit
;
553 grid-auto-flow: inherit
;
554 grid-column-gap: inherit
;
555 grid-row-gap: inherit
;
556 grid-template-areas: inherit
;
557 grid-template-columns: inherit
;
558 grid-template-rows: inherit
;
560 align-content: inherit
;
561 align-items: inherit
;
562 justify-content: inherit
;
563 justify-items: inherit
;
566 ::file-selector-button:hover
,
568 input:is
([type
=reset
], [type
=button
], [type
=submit
], [type
=color
]):hover
{
569 color: -moz-buttonhovertext
;
570 background-color: -moz-buttonhoverface
;
573 ::file-selector-button:active:hover
,
575 input:is
([type
=reset
], [type
=button
], [type
=submit
], [type
=color
]):active:hover
{
577 color: -moz-buttonactivetext
;
578 background-color: -moz-buttonactiveface
;
582 /* Note this padding only affects the -moz-focus-inner ring, not the button itself */
585 border: 1px dotted transparent
;
588 :focus-visible::-moz-focus-inner
{
589 border-color: currentColor
;
592 :is
(:disabled
, :disabled:active
)::file-selector-button
,
593 button:is
(:disabled
, :disabled:active
),
594 input:is
([type
=reset
], [type
=button
], [type
=submit
], [type
=color
]):is
(:disabled
, :disabled:active
),
595 select:is
(:disabled
, :disabled:active
) > button
{
596 border-style: outset
;
600 :is
(:disabled
, :disabled:active
)::file-selector-button
,
601 button:is
(:disabled
, :disabled:active
),
602 input:is
([type
=reset
], [type
=button
], [type
=submit
]):is
(:disabled
, :disabled:active
),
603 select:is
(:disabled
, :disabled:active
) > button
{
605 background-color: -moz-ButtonDisabledFace
;
610 white-space: nowrap
!important
;
611 overflow-clip-box: padding-box
;
614 /* Revert rules which apply on all inputs. */
616 -moz-default-appearance: none
;
620 background-color: transparent
;
624 input
[type
=file
] > label
{
625 display: inline-block
;
626 min-inline-size: 12em;
627 text-align: match-parent
;
631 letter-spacing: unset
;
634 unicode-bidi: plaintext
;
637 /* button part of file selector */
638 ::file-selector-button
{
640 letter-spacing: unset
;
642 margin-inline-end: 5px;
646 * Make form controls inherit 'unicode-bidi' transparently as required by
647 * their various anonymous descendants and pseudo-elements:
649 * <textarea> and <input type=text>:
650 * inherit into the scroll frame with pseudo ::-moz-text-control-editing-root
651 * which is a (direct or indirect) child of the text control.
653 * Buttons (either <button>, <input type=submit>, <input type=button>
654 * or <input type=reset>)
655 * inherit into the ':-moz-button-content' pseudo-element.
658 * inherit into the label and the <optgroup>'s ':before' pseudo-element,
659 * which is where the label of the <optgroup> gets displayed. The <option>s
660 * don't use anonymous boxes, so they need no special rules.
663 ::-moz-text-control-editing-root
,
664 *|
*::-moz-button-content
,
667 unicode-bidi: inherit
;
668 text-overflow: inherit
;
673 -moz-default-appearance: progress-bar
;
674 display: inline-block
;
675 vertical-align: -0.2em;
677 /* Default style in case of there is appearance: none; */
678 border: 1px solid ThreeDShadow
;
679 border-right-color: ThreeDHighlight
;
680 border-bottom-color: ThreeDHighlight
;
681 /* #e6e6e6 is a light gray. */
682 background-color: #e6e6e6;
686 progress::-moz-progress-bar
,
687 progress::slider-fill
{
688 /* Prevent styling that would change the type of frame we construct. */
689 display: inline-block
!important
;
690 float: none
!important
;
691 position: static
!important
;
692 overflow: visible
!important
;
693 box-sizing: border-box
!important
;
696 -moz-default-appearance: progresschunk
;
700 /* Default style in case of there is appearance: none; */
701 background-color: #0064b4; /* blue */
706 -moz-default-appearance: meter
;
707 display: inline-block
;
708 vertical-align: -0.2em;
709 background: linear-gradient
(#e6e6e6, #e6e6e6, #eeeeee 20%, #cccccc 45%, #cccccc 55%);
713 meter::-moz-meter-bar
,
715 /* Block styles that would change the type of frame we construct. */
716 display: inline-block
!important
;
717 float: none
!important
;
718 position: static
!important
;
719 overflow: visible
!important
;
722 -moz-default-appearance: meterchunk
;
727 meter:-moz-meter-optimum::-moz-meter-bar
,
728 meter:-moz-meter-optimum::slider-fill
{
730 background: linear-gradient
(#ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);
732 meter:-moz-meter-sub-optimum::-moz-meter-bar
,
733 meter:-moz-meter-sub-optimum::slider-fill
{
735 background: linear-gradient
(#fe7, #fe7, #ffc 20%, #db3 45%, #db3 55%);
737 meter:-moz-meter-sub-sub-optimum::-moz-meter-bar
,
738 meter:-moz-meter-sub-sub-optimum::slider-fill
{
740 background: linear-gradient
(#f77, #f77, #fcc 20%, #d44 45%, #d44 55%);
745 -moz-default-appearance: range
;
747 /* Override some rules that apply on all input types: */
751 /* Prevent nsIFrame::HandlePress setting mouse capture to this element. */
752 user-select: none
!important
;
756 * Layout handles positioning of this pseudo-element specially (so that content
757 * authors can concentrate on styling the thumb without worrying about the
758 * logic to position it). Specifically the 'margin', 'top' and 'left'
759 * properties are ignored.
761 * If content authors want to have a vertical range, they will also need to
762 * set the width/height of this pseudo-element.
764 * TODO(emilio, bug 1663819): Losen these restrictions once these
765 * pseudo-elements are better spec'd out.
767 input
[type
=range
]::-moz-range-track
,
768 input
[type
=range
]::slider-track
{
769 /* Prevent styling that would change the type of frame we construct. */
770 display: block
!important
;
771 float: none
!important
;
772 position: static
!important
;
773 writing-mode: unset
!important
;
774 direction: unset
!important
;
775 block-size: 0.2em; /* same as inline-size below */
776 /* Prevent nsIFrame::HandlePress setting mouse capture to this element. */
777 user-select: none
!important
;
780 input
[type
=range
][orient
=vertical
]::-moz-range-track
,
781 input
[type
=range
][orient
=vertical
]::slider-track
{
782 inline-size: 0.2em; /* same as block-size above */
787 * Layout handles positioning of this pseudo-element specially (so that content
788 * authors can concentrate on styling this pseudo-element without worrying
789 * about the logic to position it). Specifically the 'margin', 'top' and 'left'
790 * properties are ignored. Additionally, if the range is horizontal, the width
791 * property is ignored, and if the range range is vertical, the height property
794 input
[type
=range
]::-moz-range-progress
,
795 input
[type
=range
]::slider-fill
{
796 /* Prevent styling that would change the type of frame we construct. */
797 display: block
!important
;
798 float: none
!important
;
799 position: static
!important
;
800 writing-mode: unset
!important
;
801 direction: unset
!important
;
802 /* Since one of width/height will be ignored, this just sets the "other"
806 /* Prevent nsIFrame::HandlePress setting mouse capture to this element. */
807 user-select: none
!important
;
811 * Layout handles positioning of this pseudo-element specially (so that content
812 * authors can concentrate on styling the thumb without worrying about the
813 * logic to position it). Specifically the 'margin', 'top' and 'left'
814 * properties are ignored.
816 input
[type
=range
]::-moz-range-thumb
,
817 input
[type
=range
]::slider-thumb
{
818 /* Native theming is atomic for range. Set appearance on the range
819 * to get rid of it. The thumb's appearance is fixed.
821 appearance: auto
!important
;
822 -moz-default-appearance: range-thumb
!important
;
823 /* Prevent styling that would change the type of frame we construct. */
824 display: block
!important
;
825 float: none
!important
;
826 position: static
!important
;
827 writing-mode: unset
!important
;
828 direction: unset
!important
;
832 border: 0.1em solid
#999;
833 border-radius: 0.5em;
834 background-color: #F0F0F0;
835 /* Prevent nsIFrame::HandlePress setting mouse capture to this element. */
836 user-select: none
!important
;
841 -moz-default-appearance: number-input
;
844 input
[type
=number
]::-moz-number-spin-box
{
845 writing-mode: horizontal-tb
;
847 flex-direction: column
;
850 justify-content: center
;
851 /* Don't allow the spin buttons to create overflow */
857 /* stylelint-disable-next-line media-query-no-invalid */
858 @media (-moz-bool-pref: "dom.forms.number.hide_spin_buttons_when_no_hover_or_focus") {
859 input
[type
=number
]:not
(:hover
, :focus
)::-moz-number-spin-box
{
864 input
[type
=number
]::-moz-number-spin-up
,
865 input
[type
=number
]::-moz-number-spin-down
{
866 writing-mode: horizontal-tb
;
868 -moz-default-appearance: spinner-upbutton
;
869 display: block
; /* bug 926670 */
874 input
[type
=number
]::-moz-number-spin-down
{
875 -moz-default-appearance: spinner-downbutton
;
878 input::-moz-search-clear-button
,
886 margin-inline-start: 1px;
887 background-image: url
("resource://content-accessible/searchfield-cancel.svg");
888 background-repeat: no-repeat
;
889 background-position: center
;
890 background-size: contain
;
894 background-image: url
("resource://gre-resources/password.svg");
895 -moz-context-properties: fill
;
899 input:-moz-revealed::-moz-reveal
{
900 background-image: url
("resource://gre-resources/password-hide.svg");
903 input:-moz-value-empty::-moz-reveal
,
904 input:-moz-value-empty::-moz-search-clear-button
{
908 input:is
([type
=date
], [type
=time
], [type
=datetime-local
]) {
909 font-family: -moz-fixed
;
913 input:is
([type
=date
], [type
=time
], [type
=datetime-local
]):is
(:disabled
, :read-only
) {
917 input:autofill
, select:autofill
{
918 background-color: -moz-autofill-background
!important
;
919 background-image: none
!important
;
920 color: FieldText
!important
;