Styling an input type=number
HtmlCssHtml Problem Overview
Is it possible to apply a style in the inner "up arrow" and "down arrow" of a <input type="number"> in CSS? I would like to change the background of the up arrow to blue and the down arrow to red. Any ideas?
Html Solutions
Solution 1 - Html
UPDATE 17/03/2017
Original solution won't work anymore. The spinners are part of shadow dom. For now just to hide in chrome use:
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
<input type="number" />
or to always show:
input[type=number]::-webkit-inner-spin-button {
opacity: 1;
}
<input type="number" />
You can try the following but keep in mind that works only for Chrome:
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
cursor:pointer;
display:block;
width:8px;
color: #333;
text-align:center;
position:relative;
}
input[type=number]::-webkit-inner-spin-button:before,
input[type=number]::-webkit-inner-spin-button:after {
content: "^";
position:absolute;
right: 0;
}
input[type=number]::-webkit-inner-spin-button:before {
top:0px;
}
input[type=number]::-webkit-inner-spin-button:after {
bottom:0px;
-webkit-transform: rotate(180deg);
}
<input type="number" />
Solution 2 - Html
For Mozilla
input[type=number] {
-moz-appearance: textfield;
appearance: textfield;
margin: 0;
}
For Chrome
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
Solution 3 - Html
I modified @LcSalazar's answer a bit... it's still not perfect because the background of the default buttons can still be seen in both Firefox, Chrome & Opera (not tested in Safari); but clicking on the arrows still works
Notes:
- Adding
pointer-events: none;allows you to click through the overlapping button, but then you can not style the button while hovered. - The arrows are visible in Edge, but don't work because Edge doesn't use arrows. It only adds an "x" to clear the input.
.number-wrapper {
position: relative;
}
.number-wrapper:after,
.number-wrapper:before {
position: absolute;
right: 5px;
width: 1.6em;
height: .9em;
font-size: 10px;
pointer-events: none;
background: #fff;
}
.number-wrapper:after {
color: blue;
content: "\25B2";
margin-top: 1px;
}
.number-wrapper:before {
color: red;
content: "\25BC";
margin-bottom: 5px;
bottom: -.5em;
}
<span class='number-wrapper'>
<input type="number" />
</span>
Solution 4 - Html
A little different to the other answers, using a similar concept but divs instead of pseudoclasses:
input {
position: absolute;
left: 10px;
top: 10px;
width: 50px;
height: 20px;
padding: 0px;
font-size: 14pt;
border: solid 0.5px #000;
z-index: 1;
}
.spinner-button {
position: absolute;
cursor: default;
z-index: 2;
background-color: #ccc;
width: 14.5px;
text-align: center;
margin: 0px;
pointer-events: none;
height: 10px;
line-height: 10px;
}
#inc-button {
left: 46px;
top: 10.5px;
}
#dec-button {
left: 46px;
top: 20.5px;
}
<input type="number" value="0" min="0" max="100"/>
<div id="inc-button" class="spinner-button">+</div>
<div id="dec-button" class="spinner-button">-</div>
Solution 5 - Html
I've been struggling with this on mobile and tablet. My solution was to use absolute positioning on the spinners, so I'm just posting it in case it helps anyone else:
<html><head>
<style>
body {padding: 10px;margin: 10px}
input[type=number] {
/*for absolutely positioning spinners*/
position: relative;
padding: 5px;
padding-right: 25px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity: 1;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: inner-spin-button !important;
width: 25px;
position: absolute;
top: 0;
right: 0;
height: 100%;
}
</style>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0"/>
</head>
<body >
<input type="number" value="1" step="1" />
</body></html>
Solution 6 - Html
Crazy idea...
You could play around with some pseudo elements, and create up/down arrows of css content hex codes. The only challange will be to precise the positioning of the arrow, but it may work:
input[type="number"] {
height: 100px;
}
.number-wrapper {
position: relative;
}
.number-wrapper:hover:after {
content: "\25B2";
position: absolute;
color: blue;
left: 100%;
margin-left: -17px;
margin-top: 12%;
font-size: 11px;
}
.number-wrapper:hover:before {
content: "\25BC";
position: absolute;
color: blue;
left: 100%;
bottom: 0;
margin-left: -17px;
margin-bottom: -14%;
font-size: 11px;
}
<span class='number-wrapper'>
<input type="number" />
</span>
Solution 7 - Html
the above code for chrome is working fine. i have tried like this in mozila but its not working. i found the solution for that
For mozila
input[type=number] {
-moz-appearance: textfield;
appearance: textfield;
margin: 0;
}
Thanks Sanjib
Solution 8 - Html
The css to modify the spinner arrows is obtuse and unreliable cross-browser.
The most stable option I have found, is to absolutely position an image with pointer-events: none; on top of the spinners.
Untested in Edge but works in all other browsers.
Solution 9 - Html
Tested in Edge, this works to hide the arrows in Edge...
input[type=number]::-webkit-inner-spin-button, ::-webkit-outer-spin-button{
opacity: 0;
}