Source code
Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
/**
Styles for old GFX form widgets
**/
*|*::-moz-fieldset-content {
display: block; /* StyleAdjuster::adjust_for_fieldset_content overrides this in some cases */
unicode-bidi: inherit;
text-overflow: inherit;
overflow: inherit;
overflow-clip-box: inherit;
resize: inherit;
/* Need to inherit border-radius too, so when the fieldset has rounded
borders we don't leak out the corners for hit-testing purposes. */
border-radius: inherit;
padding: inherit;
box-decoration-break: inherit;
block-size: 100%; /* Need this so percentage block-sizes of kids work right */
/* Please keep the declarations below in sync with ::-moz-scrolled-content in
ua.css and ::-moz-button-content below. */
content: inherit;
/* Multicol container */
column-count: inherit;
column-width: inherit;
column-gap: inherit;
column-rule: inherit;
column-fill: inherit;
/* Flex container */
flex-direction: inherit;
flex-wrap: inherit;
/* -webkit-box container (aliased from -webkit versions to -moz versions) */
-moz-box-orient: inherit;
-moz-box-direction: inherit;
-moz-box-pack: inherit;
-moz-box-align: inherit;
/* Grid container */
grid-auto-columns: inherit;
grid-auto-rows: inherit;
grid-auto-flow: inherit;
grid-column-gap: inherit;
grid-row-gap: inherit;
grid-template-areas: inherit;
grid-template-columns: inherit;
grid-template-rows: inherit;
/* CSS Align */
align-content: inherit;
align-items: inherit;
justify-content: inherit;
justify-items: inherit;
}
/* Miscellaneous form elements */
legend {
display: block;
padding-inline: 2px;
}
fieldset {
display: block;
margin-inline: 2px;
padding-block: 0.35em 0.625em;
padding-inline: 0.75em;
border: 2px groove ThreeDFace;
min-inline-size: min-content;
}
label {
cursor: default;
}
/* Default inputs, text inputs, and selects */
/* Note: Values in nsNativeTheme IsWidgetStyled function
need to match textfield background/border values here */
input {
display: inline-block;
appearance: auto;
-moz-default-appearance: textfield;
/* The sum of border and padding on block-start and block-end
must be the same here, for buttons, and for <select> */
padding-block: 1px;
padding-inline: 2px;
border: 2px inset ButtonBorder;
background-color: Field;
color: FieldText;
font: -moz-field;
text-rendering: optimizeLegibility;
cursor: text;
overflow-clip-box: padding-box content-box;
}
textarea {
display: inline-block;
appearance: auto;
-moz-default-appearance: textarea;
margin-block: 1px;
border: 2px inset ButtonBorder;
padding: 2px;
background-color: Field;
color: FieldText;
font: medium -moz-fixed;
text-rendering: optimizeLegibility;
vertical-align: text-bottom;
cursor: text;
resize: both;
white-space: pre-wrap;
word-wrap: break-word;
}
/* A few properties that we don't want to inherit by default: */
input, textarea, select, button, ::file-selector-button {
text-align: initial;
text-indent: initial;
text-shadow: initial;
text-transform: initial;
word-spacing: initial;
letter-spacing: initial;
/* Note that line-height is also reset for all these, via the font shorthand */
}
::placeholder,
::-moz-text-control-editing-root,
::-moz-text-control-preview {
overflow: auto;
border: 0;
/* This is necessary to make overflow-clip-box work */
padding: inherit;
margin: 0;
text-decoration: inherit;
display: inline-block;
ime-mode: inherit;
resize: inherit;
scrollbar-width: inherit;
-moz-control-character-visibility: visible;
overflow-clip-box: inherit;
visibility: hidden;
}
::placeholder,
::-moz-text-control-preview {
/*
* Changing display to inline can leads to broken behaviour and will assert.
*/
display: inline-block;
/*
* Changing resize would display a broken behaviour and will assert.
*/
resize: none;
overflow: hidden;
/*
* The placeholder or preview should be ignored by pointer / selection / etc.
* Otherwise, we might have some unexpected behavior like the resize handle
* not being selectable.
*/
pointer-events: none;
user-select: none;
}
::-moz-text-control-preview {
font-family: system-ui;
}
::placeholder {
opacity: 0.54;
}
:not(:-moz-autofill-preview)::-moz-text-control-editing-root,
:placeholder-shown:not(:autofill)::placeholder,
:autofill::-moz-text-control-preview {
visibility: inherit;
}
input::placeholder,
input::-moz-text-control-editing-root,
input::-moz-text-control-preview {
word-wrap: normal;
white-space: pre;
/* Make the line-height equal to the available height */
line-height: -moz-block-height !important;
}
input[type=password]::-moz-text-control-editing-root,
input[type=password]::-moz-text-control-preview {
/*
* In password fields, any character should be put same direction. Otherwise,
* caret position at typing tells everybody whether the character is an RTL
* or an LTR character. Unfortunately, this makes odd rendering when bidi
* text is unmasked.
*/
unicode-bidi: bidi-override;
}
textarea::-moz-text-control-editing-root {
scroll-behavior: inherit;
overscroll-behavior: inherit;
/* StyleAdjuster makes sure that the overflow value ends up being scrollable */
overflow: inherit;
}
input:read-write,
textarea:read-write {
-moz-user-modify: read-write !important;
}
select {
margin: 0;
border-color: ButtonBorder;
font: -moz-list;
white-space: nowrap !important;
word-wrap: normal !important;
cursor: default;
box-sizing: border-box;
user-select: none;
border-width: 2px;
border-style: inset;
overflow: clip;
/* No text-decoration reaching inside, by default */
display: inline-block;
page-break-inside: avoid;
padding-block: 1px;
/* Set some styles for drop down selects. These are overridden below for
* list box selects. */
padding-inline: 4px;
background-color: -moz-Combobox;
color: -moz-ComboboxText;
vertical-align: baseline;
appearance: auto;
-moz-default-appearance: menulist;
}
select:-moz-select-list-box {
overflow-inline: hidden;
overflow-block: scroll;
padding-inline: 0;
background-color: Field;
color: FieldText;
vertical-align: text-bottom;
appearance: auto;
-moz-default-appearance: listbox;
}
@media (-moz-platform: macos) {
select:-moz-select-list-box {
scrollbar-width: thin;
}
}
select > button {
padding: 0;
border: 0;
appearance: auto;
-moz-default-appearance: -moz-menulist-arrow-button;
/* Draw the arrow in the select's color */
color: inherit;
/* We don't want the button to grow the line-height */
font: inherit;
max-block-size: 100%;
/* Make sure to align properly with the display frame. Note that we want the
* baseline of the combobox to match the baseline of the label, so the
* dropmarker is what gets the vertical-align. */
vertical-align: top;
}
select > label {
display: inline-block;
overflow: clip;
}
option[label]::before {
content: attr(label);
}
select:-moz-select-list-box option,
select:-moz-select-list-box optgroup {
line-height: normal !important;
}
option {
display: block;
float: none !important;
position: static !important;
/* This makes sure that it is a containing block for positioned descendants. */
will-change: -moz-fixed-pos-containing-block !important;
min-block-size: 1em;
padding-block: 2px;
user-select: none;
/*
* Note that the "UA !important" tests in
* layout/style/test/test_animations.html depend on this rule, because
* they need some UA !important rule to test. If this changes, use a
* different one there.
*/
white-space: nowrap !important;
word-wrap: normal !important;
}
select > option {
padding-inline: 4px;
}
option:checked {
background-color: -moz-cellhighlight;
color: -moz-cellhighlighttext;
}
select:-moz-select-list-box:focus option:checked {
background-color: SelectedItem !important;
color: SelectedItemText !important;
}
optgroup {
display: block;
float: none !important;
position: static !important;
font-style: italic;
font-weight: bold;
font-size: unset;
user-select: none;
white-space: nowrap !important;
word-wrap: normal !important;
}
optgroup > option {
padding-inline-start: 20px;
font-style: normal;
font-weight: normal;
}
optgroup:before {
display: block;
content: "\200b" attr(label);
}
@media (-moz-platform: android) {
/* These elements are handled by the prompt module. */
select option,
select optgroup {
pointer-events: none;
}
}
*|*::-moz-dropdown-list {
content: inherit;
z-index: 2147483647;
background-color: inherit;
user-select: none;
position: static !important;
float: none !important;
/*
* We can't change the padding here, because that would affect our
* intrinsic inline-size, since we scroll. But at the same time, we want
* to make sure that our inline-start border+padding matches the inline-start
* border+padding of a combobox so that our scrollbar will line up
* with the dropmarker. So set our inline-start border to 2px.
*/
border: 1px outset black !important;
border-inline-start-width: 2px !important;
}
input:disabled,
textarea:disabled,
option:disabled,
optgroup:disabled,
select:disabled {
color: GrayText;
background-color: -moz-DisabledField;
cursor: unset;
}
input:disabled,
textarea:disabled {
cursor: default;
}
option:disabled,
optgroup:disabled {
background-color: transparent;
}
/* hidden inputs */
input[type=hidden] {
appearance: none;
-moz-default-appearance: none;
display: none !important;
padding: unset;
border: 0;
cursor: auto;
-moz-user-focus: ignore;
}
/* image buttons */
input[type=image] {
appearance: none;
-moz-default-appearance: none;
padding: unset;
border: none;
background-color: transparent;
font-family: sans-serif;
font-size: small;
cursor: pointer;
}
input[type=image]:disabled {
cursor: unset;
}
/* colored part of the color selector button */
::-moz-color-swatch {
width: 100%;
height: 100%;
min-width: 3px;
min-height: 3px;
margin-inline: auto;
box-sizing: border-box;
border: 1px solid grey;
display: block;
}
/* radio buttons */
input[type=radio] {
appearance: auto;
-moz-default-appearance: radio;
margin-block: 3px 0;
margin-inline: 5px 3px;
}
/* check boxes */
input[type=checkbox] {
appearance: auto;
-moz-default-appearance: checkbox;
margin-block: 3px;
margin-inline: 4px 3px;
}
/* Common features of radio buttons and check boxes */
input[type=radio],
input[type=checkbox] {
box-sizing: border-box;
cursor: default;
/* unset some values from the general 'input' rule above: */
padding: unset;
border: unset;
background-color: unset;
color: unset;
}
input:is([type=radio], [type=checkbox]):is(:disabled, :disabled:active, :disabled:hover:active) {
cursor: unset;
}
input[type=search] {
box-sizing: border-box;
}
/* buttons */
/* Note: Values in nsNativeTheme IsWidgetStyled function
need to match button background/border values here */
/* Non text-related properties for buttons: these ones are shared with
input[type=color] */
button,
::file-selector-button,
input:is([type=color], [type=reset], [type=button], [type=submit]) {
appearance: auto;
-moz-default-appearance: button;
/* The sum of border and padding on block-start and block-end
must be the same here, for text inputs, and for <select>.
Note -moz-focus-inner padding does not affect button size. */
padding-block: 1px;
padding-inline: 8px;
border: 2px outset ButtonBorder;
background-color: ButtonFace;
cursor: default;
box-sizing: border-box;
user-select: none;
overflow-clip-box: padding-box;
}
/* Text-related properties for buttons: these ones are not shared with
input[type=color] */
button,
::file-selector-button,
input:is([type=reset], [type=button], [type=submit]) {
color: ButtonText;
font: -moz-button;
white-space: pre;
text-align: center;
padding-inline: 4px;
}
input[type=color] {
inline-size: 64px;
block-size: 32px;
padding: 4px;
}
input:not([type=image i], [type=range i], [type=checkbox i], [type=radio i]) {
overflow: clip !important;
overflow-clip-margin: 0px !important;
}
button,
::file-selector-button {
/* Buttons should lay out like "normal" html, mostly */
white-space: unset;
/* But no text-decoration reaching inside, by default */
display: inline-block;
}
*|*::-moz-button-content {
display: block;
/* Please keep the declarations below in sync with ::-moz-scrolled-content in
ua.css and ::-moz-fieldset-content above. */
content: inherit;
/* Multicol container */
column-count: inherit;
column-width: inherit;
column-gap: inherit;
column-rule: inherit;
column-fill: inherit;
/* Flex container */
flex-direction: inherit;
flex-wrap: inherit;
/* -webkit-box container (aliased from -webkit versions to -moz versions) */
-moz-box-orient: inherit;
-moz-box-direction: inherit;
-moz-box-pack: inherit;
-moz-box-align: inherit;
/* Grid container */
grid-auto-columns: inherit;
grid-auto-rows: inherit;
grid-auto-flow: inherit;
grid-column-gap: inherit;
grid-row-gap: inherit;
grid-template-areas: inherit;
grid-template-columns: inherit;
grid-template-rows: inherit;
/* CSS Align */
align-content: inherit;
align-items: inherit;
justify-content: inherit;
justify-items: inherit;
}
::file-selector-button:hover,
button:hover,
input:is([type=reset], [type=button], [type=submit], [type=color]):hover {
color: -moz-buttonhovertext;
background-color: -moz-buttonhoverface;
}
::file-selector-button:active:hover,
button:active:hover,
input:is([type=reset], [type=button], [type=submit], [type=color]):active:hover {
border-style: inset;
color: -moz-buttonactivetext;
background-color: -moz-buttonactiveface;
}
::-moz-focus-inner {
/* Note this padding only affects the -moz-focus-inner ring, not the button itself */
padding-block: 0;
padding-inline: 2px;
border: 1px dotted transparent;
}
:focus-visible::-moz-focus-inner {
border-color: currentColor;
}
:is(:disabled, :disabled:active)::file-selector-button,
button:is(:disabled, :disabled:active),
input:is([type=reset], [type=button], [type=submit], [type=color]):is(:disabled, :disabled:active),
select:is(:disabled, :disabled:active) > button {
border-style: outset;
cursor: unset;
}
:is(:disabled, :disabled:active)::file-selector-button,
button:is(:disabled, :disabled:active),
input:is([type=reset], [type=button], [type=submit]):is(:disabled, :disabled:active),
select:is(:disabled, :disabled:active) > button {
color: GrayText;
background-color: -moz-ButtonDisabledFace;
}
/* file selector */
input[type=file] {
white-space: nowrap !important;
overflow-clip-box: padding-box;
color: unset;
/* Revert rules which apply on all inputs. */
appearance: none;
-moz-default-appearance: none;
cursor: default;
border: none;
background-color: transparent;
padding: unset;
}
input[type=file] > label {
display: inline-block;
min-inline-size: 12em;
text-align: match-parent;
color: unset;
font-size: unset;
letter-spacing: unset;
user-select: none;
unicode-bidi: plaintext;
}
/* button part of file selector */
::file-selector-button {
font-size: unset;
letter-spacing: unset;
cursor: unset;
margin-inline-end: 5px;
}
/*
* Make form controls inherit 'unicode-bidi' transparently as required by
* their various anonymous descendants and pseudo-elements:
*
* <textarea> and <input type=text>:
* inherit into the scroll frame with pseudo ::-moz-text-control-editing-root
* which is a (direct or indirect) child of the text control.
*
* Buttons (either <button>, <input type=submit>, <input type=button>
* or <input type=reset>)
* inherit into the ':-moz-button-content' pseudo-element.
*
* <select>:
* inherit into the label and the <optgroup>'s ':before' pseudo-element,
* which is where the label of the <optgroup> gets displayed. The <option>s
* don't use anonymous boxes, so they need no special rules.
*/
::placeholder,
::-moz-text-control-editing-root,
*|*::-moz-button-content,
select > label,
optgroup::before {
unicode-bidi: inherit;
text-overflow: inherit;
}
progress {
appearance: auto;
-moz-default-appearance: progress-bar;
display: inline-block;
vertical-align: -0.2em;
/* Default style in case of there is appearance: none; */
border: 1px solid ThreeDShadow;
border-right-color: ThreeDHighlight;
border-bottom-color: ThreeDHighlight;
/* #e6e6e6 is a light gray. */
background-color: #e6e6e6;
overflow: clip;
}
progress::-moz-progress-bar,
progress::slider-fill {
/* Prevent styling that would change the type of frame we construct. */
display: inline-block !important;
float: none !important;
position: static !important;
overflow: visible !important;
box-sizing: border-box !important;
appearance: auto;
-moz-default-appearance: progresschunk;
height: 100%;
width: 100%;
/* Default style in case of there is appearance: none; */
background-color: #0064b4; /* blue */
}
meter {
appearance: auto;
-moz-default-appearance: meter;
display: inline-block;
vertical-align: -0.2em;
background: linear-gradient(#e6e6e6, #e6e6e6, #eeeeee 20%, #cccccc 45%, #cccccc 55%);
overflow: clip;
}
meter::-moz-meter-bar,
meter::slider-fill {
/* Block styles that would change the type of frame we construct. */
display: inline-block !important;
float: none !important;
position: static !important;
overflow: visible !important;
appearance: auto;
-moz-default-appearance: meterchunk;
height: 100%;
width: 100%;
}
meter:-moz-meter-optimum::-moz-meter-bar,
meter:-moz-meter-optimum::slider-fill {
/* green. */
background: linear-gradient(#ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);
}
meter:-moz-meter-sub-optimum::-moz-meter-bar,
meter:-moz-meter-sub-optimum::slider-fill {
/* orange. */
background: linear-gradient(#fe7, #fe7, #ffc 20%, #db3 45%, #db3 55%);
}
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar,
meter:-moz-meter-sub-sub-optimum::slider-fill {
/* red. */
background: linear-gradient(#f77, #f77, #fcc 20%, #d44 45%, #d44 55%);
}
input[type=range] {
appearance: auto;
-moz-default-appearance: range;
margin: 2px;
/* Override some rules that apply on all input types: */
cursor: default;
padding: unset;
border: unset;
/* Prevent nsIFrame::HandlePress setting mouse capture to this element. */
user-select: none !important;
}
/**
* Layout handles positioning of this pseudo-element specially (so that content
* authors can concentrate on styling the thumb without worrying about the
* logic to position it). Specifically the 'margin', 'top' and 'left'
* properties are ignored.
*
* If content authors want to have a vertical range, they will also need to
* set the width/height of this pseudo-element.
*
* pseudo-elements are better spec'd out.
*/
input[type=range]::-moz-range-track,
input[type=range]::slider-track {
/* Prevent styling that would change the type of frame we construct. */
display: block !important;
float: none !important;
position: static !important;
writing-mode: unset !important;
direction: unset !important;
block-size: 0.2em; /* same as inline-size below */
/* Prevent nsIFrame::HandlePress setting mouse capture to this element. */
user-select: none !important;
}
input[type=range][orient=vertical]::-moz-range-track,
input[type=range][orient=vertical]::slider-track {
inline-size: 0.2em; /* same as block-size above */
block-size: 100%;
}
/**
* Layout handles positioning of this pseudo-element specially (so that content
* authors can concentrate on styling this pseudo-element without worrying
* about the logic to position it). Specifically the 'margin', 'top' and 'left'
* properties are ignored. Additionally, if the range is horizontal, the width
* property is ignored, and if the range range is vertical, the height property
* is ignored.
*/
input[type=range]::-moz-range-progress,
input[type=range]::slider-fill {
/* Prevent styling that would change the type of frame we construct. */
display: block !important;
float: none !important;
position: static !important;
writing-mode: unset !important;
direction: unset !important;
/* Since one of width/height will be ignored, this just sets the "other"
dimension. */
width: 0.2em;
height: 0.2em;
/* Prevent nsIFrame::HandlePress setting mouse capture to this element. */
user-select: none !important;
}
/**
* Layout handles positioning of this pseudo-element specially (so that content
* authors can concentrate on styling the thumb without worrying about the
* logic to position it). Specifically the 'margin', 'top' and 'left'
* properties are ignored.
*/
input[type=range]::-moz-range-thumb,
input[type=range]::slider-thumb {
/* Native theming is atomic for range. Set appearance on the range
* to get rid of it. The thumb's appearance is fixed.
*/
appearance: auto !important;
-moz-default-appearance: range-thumb !important;
/* Prevent styling that would change the type of frame we construct. */
display: block !important;
float: none !important;
position: static !important;
writing-mode: unset !important;
direction: unset !important;
width: 1em;
height: 1em;
border: 0.1em solid #999;
border-radius: 0.5em;
background-color: #F0F0F0;
/* Prevent nsIFrame::HandlePress setting mouse capture to this element. */
user-select: none !important;
}
input[type=number] {
appearance: auto;
-moz-default-appearance: number-input;
}
input[type=number]::-moz-number-spin-box {
writing-mode: horizontal-tb;
display: flex;
flex-direction: column;
width: max-content;
align-self: center;
justify-content: center;
/* Don't allow the spin buttons to create overflow */
max-height: 100%;
max-width: 100%;
overflow: clip;
}
/* stylelint-disable-next-line media-query-no-invalid */
@media (-moz-bool-pref: "dom.forms.number.hide_spin_buttons_when_no_hover_or_focus") {
input[type=number]:not(:hover, :focus)::-moz-number-spin-box {
opacity: 0;
}
}
input[type=number]::-moz-number-spin-up,
input[type=number]::-moz-number-spin-down {
writing-mode: horizontal-tb;
appearance: auto;
-moz-default-appearance: spinner-upbutton;
flex-grow: 1;
cursor: default;
}
input[type=number]::-moz-number-spin-down {
-moz-default-appearance: spinner-downbutton;
}
input::-moz-search-clear-button,
input::-moz-reveal {
display: block;
cursor: default;
width: 1em;
height: 1em;
max-height: 100%;
max-width: 100%;
margin-inline-start: 1px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
input::-moz-reveal {
-moz-context-properties: fill;
fill: currentColor;
}
input:-moz-revealed::-moz-reveal {
}
input:-moz-value-empty::-moz-reveal,
input:-moz-value-empty::-moz-search-clear-button {
visibility: hidden;
}
input:is([type=date], [type=time], [type=datetime-local]) {
font-family: -moz-fixed;
cursor: default;
}
input:is([type=date], [type=time], [type=datetime-local]):is(:disabled, :read-only) {
color: GrayText;
}
input:autofill, select:autofill {
background-color: -moz-autofill-background !important;
background-image: none !important;
color: FieldText !important;
}