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 */
11 @namespace xul url
(http://www
.mozilla
.org
/keymaster
/gatekeeper
/there
.is
.only
.xul
);
13 *|
*::-moz-fieldset-content
{
15 unicode-bidi: inherit
;
16 text-overflow: inherit
;
19 height: 100%; /* Need this so percentage heights of kids work right */
22 /* miscellaneous form elements */
27 width: -moz-fit-content
;
38 padding: 0.35em 0.625em 0.75em;
39 border: 2px groove ThreeDFace
;
46 /* default inputs, text inputs, and selects */
48 /* Note: Values in nsNativeTheme IsWidgetStyled function
49 need to match textfield background/border values here */
52 -moz-appearance: textfield
;
53 /* The sum of border-top, border-bottom, padding-top, padding-bottom
54 must be the same here, for buttons, and for <select> (including its
55 internal padding magic) */
57 border: 2px inset ThreeDFace
;
58 background-color: -moz-Field
;
59 color: -moz-FieldText
;
61 text-rendering: optimizeLegibility
;
66 letter-spacing: normal
;
68 -moz-binding: url
("chrome://global/content/platformHTMLBindings.xml#inputFields");
70 -moz-user-select: text
;
72 overflow-clip-box: content-box
;
75 input
> .anonymous-div
,
76 input::-moz-placeholder
{
77 word-wrap: normal
!important
;
78 /* Make the line-height equal to the available height */
79 line-height: -moz-block-height
;
82 @-moz-document url-prefix
(chrome://) {
83 input
.uri-element-right-align:-moz-locale-dir
(rtl
) {
84 direction: ltr
!important
;
85 text-align: right
!important
;
88 /* Make sure that the location bar's alignment in RTL mode changes according
89 to the input box direction if the user switches the text direction using
90 cmd_switchTextDirection (which applies a dir attribute to the <input>). */
91 input
.uri-element-right-align
[dir
=ltr
]:-moz-locale-dir
(rtl
) {
92 text-align: left
!important
;
98 border: 2px inset ThreeDFace
;
99 /* The 1px horizontal padding is for parity with Win/IE */
101 background-color: -moz-Field
;
102 color: -moz-FieldText
;
103 font: medium
-moz-fixed
;
104 text-rendering: optimizeLegibility
;
106 text-transform: none
;
107 word-spacing: normal
;
108 letter-spacing: normal
;
109 vertical-align: text-bottom
;
112 -moz-binding: url
("chrome://global/content/platformHTMLBindings.xml#textAreas");
113 -moz-appearance: textfield-multiline
;
115 -moz-user-select: text
;
117 word-wrap: break-word
;
118 overflow-clip-box: content-box
;
121 textarea
> scrollbar
{
125 textarea
> .anonymous-div
,
126 input
> .anonymous-div
,
127 input::-moz-placeholder
,
128 textarea::-moz-placeholder
{
131 border: 0px !important
;
132 padding: inherit
!important
;
134 text-decoration: inherit
;
135 -moz-text-decoration-color: inherit
;
136 -moz-text-decoration-style: inherit
;
137 display: inline-block
;
140 -moz-control-character-visibility: visible
;
141 overflow-clip-box: inherit
;
144 textarea
> .anonymous-div
.wrap
,
145 input
> .anonymous-div
.wrap
{
146 white-space: pre-wrap
;
148 textarea
> .anonymous-div
.inherit-overflow
,
149 input
> .anonymous-div
.inherit-overflow
{
153 input::-moz-placeholder
,
154 textarea::-moz-placeholder
{
156 * Changing display to inline can leads to broken behaviour and will assert.
158 display: inline-block
!important
;
161 * Changing resize would display a broken behaviour and will assert.
163 resize: none
!important
;
165 overflow: hidden
!important
;
168 * The placeholder should be ignored by pointer otherwise, we might have some
169 * unexpected behavior like the resize handle not being selectable.
171 pointer-events: none
!important
;
176 textarea::-moz-placeholder
{
177 white-space: pre-wrap
!important
;
180 input:-moz-read-write
,
181 textarea:-moz-read-write
{
182 -moz-user-modify: read-write
!important
;
187 border-color: ThreeDFace
;
188 background-color: -moz-Combobox
;
189 color: -moz-ComboboxText
;
192 * Note that the "UA !important" tests in
193 * layout/style/test/test_animations.html depend on this rule, because
194 * they need some UA !important rule to test. If this changes, use a
195 * different one there.
197 line-height: normal
!important
;
198 white-space: nowrap
!important
;
199 word-wrap: normal
!important
;
202 box-sizing: border-box
;
203 -moz-user-select: none
;
204 -moz-appearance: menulist
;
208 overflow: -moz-hidden-unscrollable
;
210 /* No text-decoration reaching inside, by default */
211 display: inline-block
;
212 page-break-inside: avoid
;
213 overflow-clip-box: padding-box
!important
; /* bug 992447 */
216 /* Need the "select[size][multiple]" selector to override the settings on
217 'select[size="1"]', eg if one has <select size="1" multiple> */
221 select
[size
][multiple
] {
222 /* Different alignment and padding for listbox vs combobox */
223 background-color: -moz-Field
;
224 color: -moz-FieldText
;
225 vertical-align: text-bottom
;
226 padding: 1px 0 1px 0;
227 -moz-appearance: listbox
;
232 /* Except this is not a listbox */
233 background-color: -moz-Combobox
;
234 color: -moz-ComboboxText
;
235 vertical-align: baseline
;
237 -moz-appearance: menulist
;
244 position: static
!important
;
245 background-image: url
("arrow.gif") !important
;
246 background-repeat: no-repeat
!important
;
247 background-position: center
!important
;
248 -moz-appearance: menulist-button
;
250 /* Make sure to size correctly if the combobox has a non-auto height. */
251 height: 100% ! important
;
252 box-sizing: border-box
! important
;
255 Make sure to align properly with the display frame. Note that we
256 want the baseline of the combobox to match the baseline of the
257 display frame, so the dropmarker is what gets the vertical-align.
259 vertical-align: top
!important
;
262 select
> button:active
{
263 background-image: url
("arrowd.gif") !important
;
270 *|
*::-moz-display-comboboxcontrol-frame
{
271 overflow: -moz-hidden-unscrollable
;
272 /* This top/bottom padding plus the combobox top/bottom border need to
273 add up to the top/bottom borderpadding of text inputs and buttons */
276 -moz-padding-start: 4px;
281 -moz-user-select: none
;
282 /* Make sure to size correctly if the combobox has a non-auto height. */
283 height: 100% ! important
;
284 box-sizing: border-box
! important
;
285 line-height: -moz-block-height
;
290 float: none
!important
;
291 position: static
!important
;
293 line-height: normal
!important
;
294 -moz-user-select: none
;
296 white-space: nowrap
!important
;
297 word-wrap: normal
!important
;
303 -moz-padding-start: 3px;
304 -moz-padding-end: 5px;
308 background-color: -moz-html-cellhighlight
!important
;
309 color: -moz-html-cellhighlighttext
!important
;
312 select:focus
> option:checked
,
313 select:focus
> optgroup
> option:checked
{
314 background-color: Highlight
! important
;
315 color: HighlightText
! important
;
320 float: none
!important
;
321 position: static
!important
;
323 line-height: normal
!important
;
327 -moz-user-select: none
;
329 white-space: nowrap
!important
;
330 word-wrap: normal
!important
;
334 -moz-padding-start: 20px;
341 content: attr
(label
);
344 *|
*::-moz-dropdown-list
{
346 background-color: inherit
;
347 -moz-user-select: none
;
348 position: static
!important
;
349 float: none
!important
;
352 * We can't change the padding here, because that would affect our
353 * intrinsic width, since we scroll. But at the same time, we want
354 * to make sure that our left border+padding matches the left
355 * border+padding of a combobox so that our scrollbar will line up
356 * with the dropmarker. So set our left border to 2px.
358 border: 1px outset black
!important
;
359 border-left-width: 2px ! important
;
366 select:disabled:disabled
/* Need the pseudo-class twice to have the specificity
367 be at least the same as select[size][multiple] above */
369 -moz-user-input: disabled
;
371 background-color: ThreeDFace
;
382 background-color: transparent
;
386 input
[type
="hidden"] {
387 -moz-appearance: none
;
388 display: none
!important
;
392 -moz-user-focus: ignore
;
397 input
[type
="image"] {
398 -moz-appearance: none
;
401 background-color: transparent
;
402 font-family: sans-serif
;
408 input
[type
="image"]:disabled
{
412 input
[type
="image"]:-moz-focusring
{
413 /* Don't specify the outline-color, we should always use initial value. */
419 display: inline-block
;
422 overflow-clip-box: padding-box
;
425 /* Revert rules which apply on all inputs. */
426 -moz-appearance: none
;
431 background-color: transparent
;
435 input
[type
="file"] > xul|label
{
437 -moz-padding-start: 5px;
441 letter-spacing: inherit
;
444 * Force the text to have LTR directionality. Otherwise filenames containing
445 * RTL characters will be reordered with chaotic results.
447 direction: ltr
!important
;
450 /* button part of file selector */
451 input
[type
="file"] > button
[type
="button"] {
454 letter-spacing: inherit
;
458 /* colored part of the color selector button */
459 input
[type
="color"]:-moz-system-metric
(color-picker-available
)::-moz-color-swatch
{
466 box-sizing: border-box
;
467 border: 1px solid grey
;
471 /* Try to make RTL <input type='file'> look nicer. */
472 /* TODO: use text-align: match-parent when bug 645642 is fixed. */
473 input
[type
="file"]:-moz-dir
(rtl
) > xul|label
{
474 -moz-padding-start: 0px;
480 input
[type
="radio"] {
481 -moz-appearance: radio
;
482 margin: 3px 3px 0px 5px;
483 border-radius: 100% !important
;
487 input
[type
="checkbox"] {
488 -moz-appearance: checkbox
;
489 margin: 3px 3px 3px 4px;
490 border-radius: 0 !important
;
493 /* common features of radio buttons and check boxes */
495 /* NOTE: The width, height, border-width, and padding here must all
496 add up the way nsFormControlFrame::GetIntrinsic(Width|Height)
497 expects them to, or they will not come out with total width equal
498 to total height on sites that set their 'width' or 'height' to 'auto'.
499 (Should we maybe set !important on width and height, then?) */
501 input
[type
="checkbox"] {
502 box-sizing: border-box
;
506 padding: 0 !important
;
508 /* same colors as |input| rule, but |!important| this time. */
509 background-color: -moz-Field
! important
;
510 color: -moz-FieldText
! important
;
511 border: 2px inset ThreeDFace
! important
;
514 input
[type
="radio"]:disabled
,
515 input
[type
="radio"]:disabled:active
,
516 input
[type
="radio"]:disabled:hover
,
517 input
[type
="radio"]:disabled:hover:active
,
518 input
[type
="checkbox"]:disabled
,
519 input
[type
="checkbox"]:disabled:active
,
520 input
[type
="checkbox"]:disabled:hover
,
521 input
[type
="checkbox"]:disabled:hover:active
{
523 border: 1px inset ThreeDShadow
! important
;
524 /* same as above, but !important */
525 color: GrayText
! important
;
526 background-color: ThreeDFace
! important
;
530 input
[type
="checkbox"]:-moz-focusring
,
531 input
[type
="radio"]:-moz-focusring
{
532 border-style: groove
!important
;
535 input
[type
="checkbox"]:hover:active
,
536 input
[type
="radio"]:hover:active
{
537 background-color: ThreeDFace
! important
;
538 border-style: inset
!important
;
543 /* Note: Values in nsNativeTheme IsWidgetStyled function
544 need to match button background/border values here */
546 /* Non text-related properties for buttons: these ones are shared with
547 input[type="color"] */
549 input
[type
="color"]:-moz-system-metric
(color-picker-available
),
551 input
[type
="button"],
552 input
[type
="submit"] {
553 -moz-appearance: button
;
554 /* The sum of border-top, border-bottom, padding-top, padding-bottom
555 must be the same here, for text inputs, and for <select>. For
556 buttons, make sure to include the -moz-focus-inner border/padding. */
557 padding: 0px 6px 0px 6px;
558 border: 2px outset ButtonFace
;
559 background-color: ButtonFace
;
561 box-sizing: border-box
;
562 -moz-user-select: none
;
566 /* Text-related properties for buttons: these ones are not shared with
567 input[type="color"] */
570 input
[type
="button"],
571 input
[type
="submit"] {
578 overflow-clip-box: padding-box
;
581 input
[type
="color"]:-moz-system-metric
(color-picker-available
) {
587 /* Buttons should lay out like "normal" html, mostly */
588 white-space: inherit
;
590 /* But no text-decoration reaching inside, by default */
591 display: inline-block
;
594 *|
*::-moz-button-content
{
599 input
[type
="color"]:-moz-system-metric
(color-picker-available
):hover
,
600 input
[type
="reset"]:hover
,
601 input
[type
="button"]:hover
,
602 input
[type
="submit"]:hover
{
603 background-color: -moz-buttonhoverface
;
607 input
[type
="reset"]:hover
,
608 input
[type
="button"]:hover
,
609 input
[type
="submit"]:hover
{
610 color: -moz-buttonhovertext
;
614 input
[type
="color"]:-moz-system-metric
(color-picker-available
):active:hover
,
615 input
[type
="reset"]:active:hover
,
616 input
[type
="button"]:active:hover
,
617 input
[type
="submit"]:active:hover
{
618 padding: 0px 5px 0px 7px;
620 background-color: ButtonFace
;
624 input
[type
="reset"]:active:hover
,
625 input
[type
="button"]:active:hover
,
626 input
[type
="submit"]:active:hover
{
630 button::-moz-focus-inner
,
631 input
[type
="color"]:-moz-system-metric
(color-picker-available
)::-moz-focus-inner
,
632 input
[type
="reset"]::-moz-focus-inner
,
633 input
[type
="button"]::-moz-focus-inner
,
634 input
[type
="submit"]::-moz-focus-inner
,
635 input
[type
="file"] > button
[type
="button"]::-moz-focus-inner
{
636 padding: 0px 2px 0px 2px;
637 border: 1px dotted transparent
;
640 button:-moz-focusring::-moz-focus-inner
,
641 input
[type
="color"]:-moz-system-metric
(color-picker-available
):-moz-focusring::-moz-focus-inner
,
642 input
[type
="reset"]:-moz-focusring::-moz-focus-inner
,
643 input
[type
="button"]:-moz-focusring::-moz-focus-inner
,
644 input
[type
="submit"]:-moz-focusring::-moz-focus-inner
,
645 input
[type
="file"] > button
[type
="button"]:-moz-focusring::-moz-focus-inner
{
646 border-color: ButtonText
;
649 button:disabled:active
, button:disabled
,
650 input
[type
="color"]:-moz-system-metric
(color-picker-available
):disabled:active
,
651 input
[type
="color"]:-moz-system-metric
(color-picker-available
):disabled
,
652 input
[type
="reset"]:disabled:active
,
653 input
[type
="reset"]:disabled
,
654 input
[type
="button"]:disabled:active
,
655 input
[type
="button"]:disabled
,
656 select:disabled
> button
,
657 select:disabled
> button
,
658 input
[type
="submit"]:disabled:active
,
659 input
[type
="submit"]:disabled
{
660 /* The sum of border-top, border-bottom, padding-top, padding-bottom
661 must be the same here and for text inputs */
662 padding: 0px 6px 0px 6px;
663 border: 2px outset ButtonFace
;
667 button:disabled:active
, button:disabled
,
668 input
[type
="reset"]:disabled:active
,
669 input
[type
="reset"]:disabled
,
670 input
[type
="button"]:disabled:active
,
671 input
[type
="button"]:disabled
,
672 select:disabled
> button
,
673 select:disabled
> button
,
674 input
[type
="submit"]:disabled:active
,
675 input
[type
="submit"]:disabled
{
680 * Make form controls inherit 'unicode-bidi' transparently as required by
681 * their various anonymous descendants and pseudo-elements:
683 * <textarea> and <input type="text">:
684 * inherit into the XULScroll frame with class 'anonymous-div' which is a
685 * child of the text control.
687 * Buttons (either <button>, <input type="submit">, <input type="button">
688 * or <input type="reset">)
689 * inherit into the ':-moz-button-content' pseudo-element.
692 * inherit into the ':-moz-display-comboboxcontrol-frame' pseudo-element and
693 * the <optgroup>'s ':before' pseudo-element, which is where the label of
694 * the <optgroup> gets displayed. The <option>s don't use anonymous boxes,
695 * so they need no special rules.
697 textarea
> .anonymous-div
,
698 input
> .anonymous-div
,
699 input::-moz-placeholder
,
700 textarea::-moz-placeholder
,
701 *|
*::-moz-button-content
,
702 *|
*::-moz-display-comboboxcontrol-frame
,
704 unicode-bidi: inherit
;
705 text-overflow: inherit
;
709 * Set default style for invalid elements.
711 :not
(output
):-moz-ui-invalid
{
712 box-shadow: 0 0 1.5px 1px red
;
715 :not
(output
):-moz-ui-invalid:-moz-focusring
{
716 box-shadow: 0 0 2px 2px rgba
(255,0,0,0.4);
719 output:-moz-ui-invalid
{
724 input
, textarea
, select
, button
{
725 -moz-user-input: none
!important
;
728 input
[type
="file"] { height: 2em; }
732 -moz-appearance: progressbar
;
733 display: inline-block
;
734 vertical-align: -0.2em;
736 /* Default style in case of there is -moz-appearance: none; */
738 /* #e6e6e6 is a light gray. */
739 -moz-border-top-colors: ThreeDShadow
#e6e6e6;
740 -moz-border-right-colors: ThreeDHighlight
#e6e6e6;
741 -moz-border-bottom-colors: ThreeDHighlight
#e6e6e6;
742 -moz-border-left-colors: ThreeDShadow
#e6e6e6;
743 background-color: #e6e6e6;
746 ::-moz-progress-bar
{
747 /* Prevent styling that would change the type of frame we construct. */
748 display: inline-block
! important
;
749 float: none
! important
;
750 position: static
! important
;
751 overflow: visible
! important
;
752 box-sizing: border-box
! important
;
754 -moz-appearance: progresschunk
;
758 /* Default style in case of there is -moz-appearance: none; */
759 background-color: #0064b4; /* blue */
763 -moz-appearance: meterbar
;
764 display: inline-block
;
765 vertical-align: -0.2em;
767 background: linear-gradient
(#e6e6e6, #e6e6e6, #eeeeee 20%, #cccccc 45%, #cccccc 55%);
771 /* Block styles that would change the type of frame we construct. */
772 display: inline-block
! important
;
773 float: none
! important
;
774 position: static
! important
;
775 overflow: visible
! important
;
777 -moz-appearance: meterchunk
;
782 :-moz-meter-optimum::-moz-meter-bar
{
784 background: linear-gradient
(#ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);
786 :-moz-meter-sub-optimum::-moz-meter-bar
{
788 background: linear-gradient
(#fe7, #fe7, #ffc 20%, #db3 45%, #db3 55%);
790 :-moz-meter-sub-sub-optimum::-moz-meter-bar
{
792 background: linear-gradient
(#f77, #f77, #fcc 20%, #d44 45%, #d44 55%);
796 -moz-appearance: range
;
797 display: inline-block
;
801 /* Override some rules that apply on all input types: */
805 -moz-binding: none
; /* we don't want any of platformHTMLBindings.xml#inputFields */
806 /* Prevent nsFrame::HandlePress setting mouse capture to this element. */
807 -moz-user-select: none
! important
;
810 input
[type
=range
][orient
=vertical
] {
816 * Ideally we'd also require :-moz-focusring here, but that doesn't currently
817 * work. Instead we only use the -moz-focus-outer border style if
818 * NS_EVENT_STATE_FOCUSRING is set (the check is in
819 * nsRangeFrame::BuildDisplayList).
821 input
[type
=range
]::-moz-focus-outer
{
822 border: 1px dotted black
;
826 * Layout handles positioning of this pseudo-element specially (so that content
827 * authors can concentrate on styling the thumb without worrying about the
828 * logic to position it). Specifically the 'margin', 'top' and 'left'
829 * properties are ignored.
831 * If content authors want to have a vertical range, they will also need to
832 * set the width/height of this pseudo-element.
834 input
[type
=range
]::-moz-range-track
{
835 /* Prevent styling that would change the type of frame we construct. */
836 display: inline-block
!important
;
837 float: none
!important
;
838 position: static
!important
;
840 border-top: solid
0.1em lightgrey
;
841 border-bottom: solid
0.1em lightgrey
;
842 background-color: grey
;
845 /* Prevent nsFrame::HandlePress setting mouse capture to this element. */
846 -moz-user-select: none
! important
;
849 input
[type
=range
][orient
=vertical
]::-moz-range-track
{
852 border-left: solid
0.1em lightgrey
;
853 border-right: solid
0.1em lightgrey
;
859 * Layout handles positioning of this pseudo-element specially (so that content
860 * authors can concentrate on styling this pseudo-element without worrying
861 * about the logic to position it). Specifically the 'margin', 'top' and 'left'
862 * properties are ignored. Additionally, if the range is horizontal, the width
863 * property is ignored, and if the range range is vertical, the height property
866 input
[type
=range
]::-moz-range-progress
{
867 /* Prevent styling that would change the type of frame we construct. */
868 display: inline-block
!important
;
869 float: none
!important
;
870 position: static
!important
;
871 /* Since one of width/height will be ignored, this just sets the "other"
876 /* Prevent nsFrame::HandlePress setting mouse capture to this element. */
877 -moz-user-select: none
! important
;
881 * Layout handles positioning of this pseudo-element specially (so that content
882 * authors can concentrate on styling the thumb without worrying about the
883 * logic to position it). Specifically the 'margin', 'top' and 'left'
884 * properties are ignored.
886 input
[type
=range
]::-moz-range-thumb
{
887 /* Native theming is atomic for range. Set -moz-appearance on the range
888 * to get rid of it. The thumb's -moz-appearance is fixed.
890 -moz-appearance: range-thumb
!important
;
891 /* Prevent styling that would change the type of frame we construct. */
892 display: inline-block
!important
;
893 float: none
!important
;
894 position: static
!important
;
897 border: 0.1em solid grey
;
898 border-radius: 0.5em;
899 background-image: url
("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><linearGradient id='g' x2='0' y2='100%'><stop stop-color='%23ddd'/><stop offset='100%' stop-color='white'/></linearGradient><rect fill='url(%23g)' width='100%' height='100%'/></svg>");
900 /* Prevent nsFrame::HandlePress setting mouse capture to this element. */
901 -moz-user-select: none
! important
;
904 /* As a temporary workaround until bug 677302 the rule for input[type=number]
905 * has moved to number-control.css
908 input
[type
=number
]::-moz-number-wrapper
{
909 /* Prevent styling that would change the type of frame we construct. */
911 float: none
!important
;
912 position: static
!important
;
916 input
[type
=number
]::-moz-number-text
{
917 -moz-appearance: none
;
918 /* work around autofocus bug 939248 on initial load */
919 -moz-user-modify: read-write
;
920 /* This pseudo-element is also an 'input' element (nested inside and
921 * distinct from the <input type=number> element) so we need to prevent the
922 * explicit setting of 'text-align' by the general CSS rule for 'input'
923 * above. We want to inherit its value from its <input type=number>
924 * ancestor, not have that general CSS rule reset it.
934 input
[type
=number
]::-moz-number-spin-box
{
936 flex-direction: column
;
938 /* The Window's Theme's spin buttons have a very narrow minimum width, so
939 * make it something reasonable:
945 justify-content: center
;
948 input
[type
=number
]::-moz-number-spin-up
{
949 -moz-appearance: spinner-upbutton
;
950 display: block
; /* bug 926670 */
953 /* Style for when native theming is off: */
954 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>');
955 background-repeat: no-repeat
;
956 background-position: center bottom
;
957 border: 1px solid darkgray
;
959 border-top-left-radius: 4px;
960 border-top-right-radius: 4px;
963 input
[type
=number
]::-moz-number-spin-down
{
964 -moz-appearance: spinner-downbutton
;
965 display: block
; /* bug 926670 */
968 /* Style for when native theming is off: */
969 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>');
970 background-repeat: no-repeat
;
971 background-position: center top
;
972 border: 1px solid darkgray
;
974 border-bottom-left-radius: 4px;
975 border-bottom-right-radius: 4px;
978 input
[type
="number"] > div
> div
> div:hover
{
979 /* give some indication of hover state for the up/down buttons */
980 background-color: lightblue
;