diff options
Diffstat (limited to 'layout/style/res/forms.css')
-rw-r--r-- | layout/style/res/forms.css | 63 |
1 files changed, 26 insertions, 37 deletions
diff --git a/layout/style/res/forms.css b/layout/style/res/forms.css index 9fb833aa74..a2d026639b 100644 --- a/layout/style/res/forms.css +++ b/layout/style/res/forms.css @@ -259,40 +259,27 @@ select:-moz-select-list-box { } select > button { - inline-size: 12px; - white-space: nowrap; - position: static; + padding: 0; + border: 0; appearance: auto; -moz-default-appearance: -moz-menulist-arrow-button; - /* Make sure to size correctly if the combobox has a non-auto height. */ - block-size: 100%; - box-sizing: border-box; - /* Draw the arrow in the select's color */ color: inherit; - /* - Make sure to align properly with the display frame. Note that we - want the baseline of the combobox to match the baseline of the - display frame, so the dropmarker is what gets the vertical-align. - */ + /* 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; } -*|*::-moz-display-comboboxcontrol-frame { - content: inherit; +select > label { + display: inline-block; overflow: clip; - color: unset; - white-space: nowrap; - text-align: unset; - user-select: none; - /* Make sure to size correctly if the combobox has a non-auto block-size. */ - block-size: 100%; - /* Try to always display our own text */ - min-inline-size: max-content; - box-sizing: border-box; - line-height: -moz-block-height; } option[label]::before { @@ -668,16 +655,15 @@ input[type=file] > label { * inherit into the ':-moz-button-content' pseudo-element. * * <select>: - * inherit into the ':-moz-display-comboboxcontrol-frame' pseudo-element 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. + * 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, -*|*::-moz-display-comboboxcontrol-frame, -optgroup:before { +select > label, +optgroup::before { unicode-bidi: inherit; text-overflow: inherit; } @@ -868,6 +854,13 @@ input[type=number]::-moz-number-spin-box { 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; @@ -922,11 +915,7 @@ input:is([type=date], [type=time], [type=datetime-local]):is(:disabled, :read-on } input:autofill, select:autofill { - /* The idea behind using background-image instead of plain background-color - * is that it's less likely to be overridden by the page. */ - background-image: linear-gradient(-moz-autofill-background, -moz-autofill-background); -} - -input:-moz-autofill-preview, select:-moz-autofill-preview { - color: GrayText; + background-color: -moz-autofill-background !important; + background-image: none !important; + color: FieldText !important; } |