gecko/layout/style/forms.css

/* 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
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/** 
  Styles for old GFX form widgets
 **/ 
 

@namespace url(http://www.w3.org/1999/xhtml); /* set default namespace to HTML */
@namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

*|*::-moz-fieldset-content {
  display: block;
  unicode-bidi: inherit;
  text-overflow: inherit;
  overflow: inherit;
  padding: inherit;
  block-size: 100%; /* Need this so percentage block-sizes of kids work right */
}

/* miscellaneous form elements */

fieldset > legend {
  -moz-padding-start: 2px;
  -moz-padding-end: 2px;
  inline-size: -moz-fit-content;
}

legend {
  display: block;
}

fieldset {
  display: block;
  -moz-margin-start: 2px;
  -moz-margin-end: 2px;
  padding-block-start: 0.35em;
  padding-block-end: 0.75em;
  -moz-padding-start: 0.625em;
  -moz-padding-end: 0.625em;
  border: 2px groove ThreeDFace;
}

label {
  cursor: default;
}

/* default inputs, text inputs, and selects */

/* Note: Values in nsNativeTheme IsWidgetStyled function 
   need to match textfield background/border values here */

input {
  -moz-appearance: textfield;
  /* The sum of border and padding on block-start and block-end
     must be the same here, for buttons, and for <select> (including its
     internal padding magic) */
  padding: 1px;
  border: 2px inset ThreeDFace;
  background-color: -moz-Field;
  color: -moz-FieldText;
  font: -moz-field;
  text-rendering: optimizeLegibility;
  line-height: normal;
  text-align: start;
  text-transform: none;
  word-spacing: normal;
  letter-spacing: normal;
  cursor: text;
  -moz-binding: url("chrome://global/content/platformHTMLBindings.xml#inputFields");
  text-indent: 0;
  -moz-user-select: text;
  text-shadow: none;
  overflow-clip-box: content-box;
}

input > .anonymous-div,
input::-moz-placeholder {
  word-wrap: normal !important;
  /* Make the line-height equal to the available height */
  line-height: -moz-block-height;
}

@-moz-document url-prefix(chrome://) {
  input.uri-element-right-align:-moz-locale-dir(rtl) {
    direction: ltr !important;
    text-align: right !important;
  }

  /* Make sure that the location bar's alignment in RTL mode changes according
     to the input box direction if the user switches the text direction using
     cmd_switchTextDirection (which applies a dir attribute to the <input>). */
  input.uri-element-right-align[dir=ltr]:-moz-locale-dir(rtl) {
    text-align: left !important;
  }
}

textarea {
  margin-block-start: 1px;
  margin-block-end: 1px;
  border: 2px inset ThreeDFace;
  /* The 1px inline padding is for parity with Win/IE */
  -moz-padding-start: 1px;
  -moz-padding-end: 1px;
  background-color: -moz-Field;
  color: -moz-FieldText;
  font: medium -moz-fixed;
  text-rendering: optimizeLegibility;
  text-align: start;
  text-transform: none;
  word-spacing: normal;
  letter-spacing: normal;
  vertical-align: text-bottom;
  cursor: text;
  resize: both;
  -moz-binding: url("chrome://global/content/platformHTMLBindings.xml#textAreas");
  -moz-appearance: textfield-multiline;
  text-indent: 0;
  -moz-user-select: text;
  text-shadow: none;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-clip-box: content-box;
}

textarea > scrollbar {
  cursor: default;
}

textarea > .anonymous-div,
input > .anonymous-div,
input::-moz-placeholder,
textarea::-moz-placeholder {
  overflow: auto;
  border: 0px !important;
  padding: inherit !important;
  margin: 0px;
  text-decoration: inherit;
  text-decoration-color: inherit;
  text-decoration-style: inherit;
  display: inline-block;
  ime-mode: inherit;
  resize: inherit;
  -moz-control-character-visibility: visible;
  overflow-clip-box: inherit;
}

input > .anonymous-div,
input::-moz-placeholder {
  white-space: pre;
}

input > .anonymous-div.wrap {
  white-space: pre-wrap;
}
textarea > .anonymous-div.inherit-overflow,
input > .anonymous-div.inherit-overflow {
  overflow: inherit;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  /*
   * Changing display to inline can leads to broken behaviour and will assert.
   */
  display: inline-block !important;

  /*
   * Changing resize would display a broken behaviour and will assert.
   */
  resize: none !important;

  overflow: hidden !important;

  /*
   * The placeholder should be ignored by pointer otherwise, we might have some
   * unexpected behavior like the resize handle not being selectable.
   */
  pointer-events: none !important;

  opacity: 0.54;
}

textarea::-moz-placeholder {
  white-space: pre-wrap !important;
}

input:-moz-read-write,
textarea:-moz-read-write {
  -moz-user-modify: read-write !important;
}

select {
  writing-mode: horizontal-tb !important; /* XXX remove when bug 1112954 is fixed */
  margin: 0;
  border-color: ThreeDFace;
  background-color: -moz-Combobox;
  color: -moz-ComboboxText;
  font: -moz-list;
  /*
   * 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.
   */
  line-height: normal !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  text-align: start; 
  cursor: default;
  box-sizing: border-box;
  -moz-user-select: none;
  -moz-appearance: menulist;
  border-width: 2px;
  border-style: inset;
  text-indent: 0;
  overflow: -moz-hidden-unscrollable;
  text-shadow: none;
  /* No text-decoration reaching inside, by default */
  display: inline-block;
  page-break-inside: avoid;
  overflow-clip-box: padding-box !important; /* bug 992447 */
}

/* Need the "select[size][multiple]" selector to override the settings on
   'select[size="1"]', eg if one has <select size="1" multiple> */
   
select[size],
select[multiple],
select[size][multiple] {
  /* Different alignment and padding for listbox vs combobox */
  background-color: -moz-Field;
  color: -moz-FieldText;
  vertical-align: text-bottom;
  padding-block-start: 1px;
  padding-block-end: 1px;
  -moz-padding-start: 0;
  -moz-padding-end: 0;
  -moz-appearance: listbox;
}

select[size="0"],
select[size="1"] {
  /* Except this is not a listbox */
  background-color: -moz-Combobox;
  color: -moz-ComboboxText;
  vertical-align: baseline;
  padding: 0;
  -moz-appearance: menulist;
}

select > button {
  inline-size: 12px;
  white-space: nowrap;
  position: static !important;
  background-image: url("arrow.gif") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  -moz-appearance: menulist-button;

  /* Make sure to size correctly if the combobox has a non-auto height. */
  block-size: 100% ! important;
  box-sizing: border-box ! important;

  /*
    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.
  */
  vertical-align: top !important;
}

select > button:active {
  background-image: url("arrowd.gif") !important;
}

select:empty {
  inline-size: 2.5em;
}

*|*::-moz-display-comboboxcontrol-frame {
  overflow: -moz-hidden-unscrollable;
  /* This block-start/end padding plus the combobox block-start/end border need to
     add up to the block-start/end borderpadding of text inputs and buttons */ 
  padding-block-start: 1px;
  padding-block-end: 1px;
  -moz-padding-start: 4px;
  -moz-padding-end: 0;
  color: inherit;
  white-space: nowrap;
  text-align: inherit;
  -moz-user-select: none;
  /* Make sure to size correctly if the combobox has a non-auto block-size. */
  block-size: 100% ! important;
  box-sizing: border-box ! important;
  line-height: -moz-block-height;
}

option {
  display: block;
  float: none !important;
  position: static !important;
  min-block-size: 1em;
  line-height: normal !important;
  -moz-user-select: none;
  text-indent: 0;
  white-space: nowrap !important;
  word-wrap: normal !important;
  text-align: match-parent;
}

select > option {
  padding-block-start : 0;
  padding-block-end: 0;
  -moz-padding-start: 3px;
  -moz-padding-end: 5px;
}

option:checked {
  background-color: -moz-html-cellhighlight !important;
  color: -moz-html-cellhighlighttext !important;
}

select:focus > option:checked,
select:focus > optgroup > option:checked {
  background-color: Highlight ! important;
  color: HighlightText ! important;
}

optgroup {
  display: block;
  float: none !important;
  position: static !important;
  font: -moz-list;
  line-height: normal !important;
  font-style: italic;
  font-weight: bold;
  font-size: inherit;
  -moz-user-select: none;
  text-indent: 0;
  white-space: nowrap !important;
  word-wrap: normal !important;
}

optgroup > option {
  -moz-padding-start: 20px;
  font-style: normal;
  font-weight: normal;
}

optgroup:before {
  display: block;
  content: attr(label);
}

*|*::-moz-dropdown-list {
  z-index: 2147483647;
  background-color: inherit;
  -moz-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;
  -moz-border-start-width: 2px ! important;
} 

input:disabled,
textarea:disabled,
option:disabled,
optgroup:disabled,
select:disabled:disabled /* Need the pseudo-class twice to have the specificity
                            be at least the same as select[size][multiple] above */
{
  -moz-user-input: disabled;
  color: GrayText;
  background-color: ThreeDFace;
  cursor: inherit;
}

input:disabled,
textarea:disabled {
  cursor: default;
}

option:disabled,
optgroup:disabled {
  background-color: transparent;
}

/* hidden inputs */
input[type="hidden"] {
  -moz-appearance: none;
  display: none !important;
  padding: 0;
  border: 0;
  cursor: auto;
  -moz-user-focus: ignore;
  -moz-binding: none;
}

/* image buttons */
input[type="image"] {
  -moz-appearance: none;
  padding: 0;
  border: none;
  background-color: transparent;
  font-family: sans-serif;
  font-size: small;
  cursor: pointer;
  -moz-binding: none;
}

input[type="image"]:disabled {
  cursor: inherit;
}

input[type="image"]:-moz-focusring {
  /* Don't specify the outline-color, we should always use initial value. */
  outline: 1px dotted;
}

/* file selector */
input[type="file"] {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  overflow-clip-box: padding-box;
  color: inherit;

  /* Revert rules which apply on all inputs. */
  -moz-appearance: none;
  -moz-binding: none;
  cursor: default;

  border: none;
  background-color: transparent;
  padding: 0;
}

input[type="file"] > xul|label {
  min-inline-size: 12em;
  -moz-padding-start: 5px;
  text-align: match-parent;

  color: inherit;
  font-size: inherit;
  letter-spacing: inherit;

  /*
   * Force the text to have LTR directionality. Otherwise filenames containing
   * RTL characters will be reordered with chaotic results.
   */
  direction: ltr !important;
}

/* button part of file selector */
input[type="file"] > button[type="button"] {
  block-size: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  cursor: inherit;
}

/* colored part of the color selector button */
input[type="color"]:-moz-system-metric(color-picker-available)::-moz-color-swatch {
  width: 100%;
  height: 100%;
  min-width: 3px;
  min-height: 3px;
  -moz-margin-start: auto;
  -moz-margin-end: auto;
  box-sizing: border-box;
  border: 1px solid grey;
  display: block;
}

/* Try to make RTL <input type='file'> look nicer. */
/* TODO: find a better solution than forcing direction: ltr on all file
   input labels and remove this override -- bug 1161482 */
input[type="file"]:-moz-dir(rtl) > xul|label {
  -moz-padding-start: 0px;
  -moz-padding-end: 5px;
}

/* radio buttons */
input[type="radio"] {
  -moz-appearance: radio;
  margin-block-start: 3px;
  margin-block-end: 0px;
  -moz-margin-start: 5px;
  -moz-margin-end: 3px;
  border-radius: 100% !important;
}

/* check boxes */
input[type="checkbox"] {
  -moz-appearance: checkbox;
  margin-block-start: 3px;
  margin-block-end: 3px;
  -moz-margin-start: 4px;
  -moz-margin-end: 3px;
  border-radius: 0 !important;
}

/* common features of radio buttons and check boxes */

/* NOTE: The width, height, border-width, and padding here must all
   add up the way nsFormControlFrame::GetIntrinsic(Width|Height)
   expects them to, or they will not come out with total width equal
   to total height on sites that set their 'width' or 'height' to 'auto'.
   (Should we maybe set !important on width and height, then?)  */
input[type="radio"],
input[type="checkbox"] {
  box-sizing: border-box;
  inline-size: 13px;
  block-size: 13px;
  cursor: default;
  padding: 0 !important;
  -moz-binding: none;
  /* same colors as |input| rule, but |!important| this time. */
  background-color: -moz-Field ! important;
  color: -moz-FieldText ! important;
  border: 2px inset ThreeDFace ! important;
}

input[type="radio"]:disabled,
input[type="radio"]:disabled:active,
input[type="radio"]:disabled:hover,
input[type="radio"]:disabled:hover:active,
input[type="checkbox"]:disabled,
input[type="checkbox"]:disabled:active,
input[type="checkbox"]:disabled:hover,
input[type="checkbox"]:disabled:hover:active {
  padding: 1px;
  border: 1px inset ThreeDShadow ! important;
  /* same as above, but !important */
  color: GrayText ! important;
  background-color: ThreeDFace ! important;
  cursor: inherit; 
}

input[type="checkbox"]:-moz-focusring,
input[type="radio"]:-moz-focusring {
  border-style: groove !important;
}

input[type="checkbox"]:hover:active,
input[type="radio"]:hover:active {
  background-color: ThreeDFace ! important;
  border-style: inset !important;
}

/* 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,
input[type="color"]:-moz-system-metric(color-picker-available),
input[type="reset"],
input[type="button"],
input[type="submit"] {
  -moz-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>.  For
     buttons, make sure to include the -moz-focus-inner border/padding. */
  padding-block-start: 0px;
  -moz-padding-end: 6px;
  padding-block-end: 0px;
  -moz-padding-start: 6px;
  border: 2px outset ButtonFace;
  background-color: ButtonFace;
  cursor: default;
  box-sizing: border-box;
  -moz-user-select: none;
  -moz-binding: none;
}

/* Text-related properties for buttons: these ones are not shared with
   input[type="color"] */
button,
input[type="reset"],
input[type="button"],
input[type="submit"] {
  color: ButtonText; 
  font: -moz-button;
  line-height: normal;
  white-space: pre;
  text-align: center;
  text-shadow: none;
  overflow-clip-box: padding-box;
}

input[type="color"]:-moz-system-metric(color-picker-available) {
  inline-size: 64px;
  block-size: 23px;
}

button {
  /* Buttons should lay out like "normal" html, mostly */
  white-space: inherit;
  text-indent: 0;
  /* But no text-decoration reaching inside, by default */
  display: inline-block;
}

*|*::-moz-button-content {
  display: block;
}

button:hover,
input[type="color"]:-moz-system-metric(color-picker-available):hover,
input[type="reset"]:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
  background-color: -moz-buttonhoverface;
}

button:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
  color: -moz-buttonhovertext;
}

button:active:hover,
input[type="color"]:-moz-system-metric(color-picker-available):active:hover,
input[type="reset"]:active:hover,
input[type="button"]:active:hover,
input[type="submit"]:active:hover {
  padding-block-start: 0px;
  -moz-padding-end: 5px;
  padding-block-end: 0px;
  -moz-padding-start: 7px;
  border-style: inset;
  background-color: ButtonFace;
}

button:active:hover,
input[type="reset"]:active:hover,
input[type="button"]:active:hover,
input[type="submit"]:active:hover {
  color: ButtonText;
}

button::-moz-focus-inner,
input[type="color"]:-moz-system-metric(color-picker-available)::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > button[type="button"]::-moz-focus-inner {
  padding-block-start: 0px;
  -moz-padding-end: 2px;
  padding-block-end: 0px;
  -moz-padding-start: 2px;
  border: 1px dotted transparent;
}

button:-moz-focusring::-moz-focus-inner,
input[type="color"]:-moz-system-metric(color-picker-available):-moz-focusring::-moz-focus-inner,
input[type="reset"]:-moz-focusring::-moz-focus-inner,
input[type="button"]:-moz-focusring::-moz-focus-inner,
input[type="submit"]:-moz-focusring::-moz-focus-inner,
input[type="file"] > button[type="button"]:-moz-focusring::-moz-focus-inner {
  border-color: ButtonText;
}

button:disabled:active, button:disabled,
input[type="color"]:-moz-system-metric(color-picker-available):disabled:active,
input[type="color"]:-moz-system-metric(color-picker-available):disabled,
input[type="reset"]:disabled:active,
input[type="reset"]:disabled,
input[type="button"]:disabled:active,
input[type="button"]:disabled,
select:disabled > button,
select:disabled > button,
input[type="submit"]:disabled:active,
input[type="submit"]:disabled {
  /* The sum of border and padding on block-start and block-end
     must be the same here and for text inputs */
  padding-block-start: 0px;
  -moz-padding-end: 6px;
  padding-block-end: 0px;
  -moz-padding-start: 6px;
  border: 2px outset ButtonFace;
  cursor: inherit; 
}

button:disabled:active, button:disabled,
input[type="reset"]:disabled:active,
input[type="reset"]:disabled,
input[type="button"]:disabled:active,
input[type="button"]:disabled,
select:disabled > button,
select:disabled > button,
input[type="submit"]:disabled:active,
input[type="submit"]:disabled {
  color: GrayText;
}

 /*
  * 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 XULScroll frame with class 'anonymous-div' which is a
  *  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 ':-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.
  */
textarea > .anonymous-div,
input > .anonymous-div,
input::-moz-placeholder,
textarea::-moz-placeholder,
*|*::-moz-button-content,
*|*::-moz-display-comboboxcontrol-frame,
optgroup:before {
  unicode-bidi: inherit;
  text-overflow: inherit;
}

/**
 * Set default style for invalid elements.
 */
:not(output):-moz-ui-invalid {
  box-shadow: 0 0 1.5px 1px red;
}

:not(output):-moz-ui-invalid:-moz-focusring {
  box-shadow: 0 0 2px 2px rgba(255,0,0,0.4);
}

output:-moz-ui-invalid {
  color: red;
}

@media print {
  input, textarea, select, button {
    -moz-user-input: none !important;
  }

  input[type="file"] { height: 2em; }
}

progress {
  -moz-appearance: progressbar;
  display: inline-block;
  vertical-align: -0.2em;

  /* Default style in case of there is -moz-appearance: none; */
  border: 2px solid;
  /* #e6e6e6 is a light gray. */
  -moz-border-top-colors: ThreeDShadow #e6e6e6;
  -moz-border-right-colors: ThreeDHighlight #e6e6e6;
  -moz-border-bottom-colors: ThreeDHighlight #e6e6e6;
  -moz-border-left-colors: ThreeDShadow #e6e6e6;
  background-color: #e6e6e6;
}

::-moz-progress-bar {
  /* 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;

  -moz-appearance: progresschunk;
  height: 100%;
  width: 100%;

  /* Default style in case of there is -moz-appearance: none; */
  background-color: #0064b4; /* blue */
}

meter {
  -moz-appearance: meterbar;
  display: inline-block;
  vertical-align: -0.2em;

  background: linear-gradient(#e6e6e6, #e6e6e6, #eeeeee 20%, #cccccc 45%, #cccccc 55%);
}

::-moz-meter-bar {
  /* Block styles that would change the type of frame we construct. */
  display: inline-block ! important;
  float: none ! important;
  position: static ! important;
  overflow: visible ! important;

  -moz-appearance: meterchunk;
  height: 100%;
  width: 100%;
}

:-moz-meter-optimum::-moz-meter-bar {
  /* green. */
  background: linear-gradient(#ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);
}
:-moz-meter-sub-optimum::-moz-meter-bar {
  /* orange. */
  background: linear-gradient(#fe7, #fe7, #ffc 20%, #db3 45%, #db3 55%);
}
:-moz-meter-sub-sub-optimum::-moz-meter-bar {
  /* red. */
  background: linear-gradient(#f77, #f77, #fcc 20%, #d44 45%, #d44 55%);
}

input[type=range] {
  -moz-appearance: range;
  display: inline-block;
  inline-size: 12em;
  block-size: 1.3em;
  -moz-margin-start: 0.7em;
  -moz-margin-end: 0.7em;
  margin-block-start: 0;
  margin-block-end: 0;
  /* Override some rules that apply on all input types: */
  cursor: default;
  background: none;
  border: none;
  -moz-binding: none; /* we don't want any of platformHTMLBindings.xml#inputFields */
  /* Prevent nsFrame::HandlePress setting mouse capture to this element. */
  -moz-user-select: none ! important;
}

input[type=range][orient=block] {
  inline-size: 1.3em;
  block-size: 12em;
  -moz-margin-start: 0;
  -moz-margin-end: 0;
  margin-block-start: 0.7em;
  margin-block-end: 0.7em;
}

input[type=range][orient=horizontal] {
  width: 12em;
  height: 1.3em;
  margin: 0 0.7em;
}

input[type=range][orient=vertical] {
  width: 1.3em;
  height: 12em;
  margin: 0.7em 0;
}

/**
 * Ideally we'd also require :-moz-focusring here, but that doesn't currently
 * work. Instead we only use the -moz-focus-outer border style if
 * NS_EVENT_STATE_FOCUSRING is set (the check is in
 * nsRangeFrame::BuildDisplayList).
 */
input[type=range]::-moz-focus-outer {
  border: 1px dotted black;
}

/**
 * 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.
 */
input[type=range]::-moz-range-track {
  /* Prevent styling that would change the type of frame we construct. */
  display: inline-block !important;
  float: none !important;
  position: static !important;
  border: none;
  background-color: #999;
  inline-size: 100%;
  block-size: 0.2em;
  /* Prevent nsFrame::HandlePress setting mouse capture to this element. */
  -moz-user-select: none ! important;
}

input[type=range][orient=block]::-moz-range-track {
  inline-size: 0.2em;
  block-size: 100%;
}

input[type=range][orient=horizontal]::-moz-range-track {
  width: 100%;
  height: 0.2em;
}

input[type=range][orient=vertical]::-moz-range-track {
  width: 0.2em;
  height: 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 {
  /* Prevent styling that would change the type of frame we construct. */
  display: inline-block !important;
  float: none !important;
  position: static !important;
  /* Since one of width/height will be ignored, this just sets the "other"
     dimension.
   */
  width: 0.2em;
  height: 0.2em;
  /* Prevent nsFrame::HandlePress setting mouse capture to this element. */
  -moz-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 {
  /* Native theming is atomic for range. Set -moz-appearance on the range
   * to get rid of it. The thumb's -moz-appearance is fixed.
   */
  -moz-appearance: range-thumb !important;
  /* Prevent styling that would change the type of frame we construct. */
  display: inline-block !important;
  float: none !important;
  position: static !important;
  width: 1em;
  height: 1em;
  border: 0.1em solid #999;
  border-radius: 0.5em;
  background-color: #F0F0F0;
  /* Prevent nsFrame::HandlePress setting mouse capture to this element. */
  -moz-user-select: none ! important;
}

/* As a temporary workaround until bug 677302 the rule for input[type=number]
 * has moved to number-control.css
 */

input[type=number]::-moz-number-wrapper {
  /* Prevent styling that would change the type of frame we construct. */
  display: flex;
  float: none !important;
  position: static !important;
  block-size: 100%;
}

input[type=number]::-moz-number-text {
  -moz-appearance: none;
  /* work around autofocus bug 939248 on initial load */
  -moz-user-modify: read-write;
  /* This pseudo-element is also an 'input' element (nested inside and
   * distinct from the <input type=number> element) so we need to prevent the
   * explicit setting of 'text-align' by the general CSS rule for 'input'
   * above. We want to inherit its value from its <input type=number>
   * ancestor, not have that general CSS rule reset it.
   */
  text-align: inherit;
  flex: 1;
  min-inline-size: 0;
  padding: 0;
  border: 0;
  margin: 0;
}

input[type=number]::-moz-number-spin-box {
  display: flex;
  flex-direction: column;
%ifdef XP_WIN
  /* The Window's Theme's spin buttons have a very narrow minimum width, so
   * make it something reasonable:
   * XXX What about vertical mode? How will the spin buttons be arranged?
   * This may need to be adjusted when bug 1123299 is implemented.
   */
  width: 16px;
%endif
  height: 0;
  align-self: center;
  justify-content: center;
}

input[type=number]::-moz-number-spin-up {
  -moz-appearance: spinner-upbutton;
  display: block; /* bug 926670 */
  flex: none;
  cursor: default;
  /* Style for when native theming is off: */
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="5"><path d="M1,4 L3,0 5,4" fill="dimgrey"/></svg>');
  background-repeat: no-repeat;
  background-position: center bottom;
  border: 1px solid darkgray;
  border-bottom: none;
  /* [JK] I think the border-*-*-radius properties here can remain physical,
     as we probably don't want to turn the spinner sideways in vertical writing mode */
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

input[type=number]::-moz-number-spin-down {
  -moz-appearance: spinner-downbutton;
  display: block; /* bug 926670 */
  flex: none;
  cursor: default;
  /* Style for when native theming is off: */
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="5"><path d="M1,1 L3,5 5,1" fill="dimgrey"/></svg>');
  background-repeat: no-repeat;
  background-position: center top;
  border: 1px solid darkgray;
  border-top: none;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

input[type="number"] > div > div > div:hover {
  /* give some indication of hover state for the up/down buttons */
  background-color: lightblue;
}