The answer is
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.
_x000D_
_x000D_
_x000D_
_x000D_
.number-wrapper {_x000D_
position: relative;_x000D_
}_x000D_
_x000D_
.number-wrapper:after,_x000D_
.number-wrapper:before {_x000D_
position: absolute;_x000D_
right: 5px;_x000D_
width: 1.6em;_x000D_
height: .9em;_x000D_
font-size: 10px;_x000D_
pointer-events: none;_x000D_
background: #fff;_x000D_
}_x000D_
_x000D_
.number-wrapper:after {_x000D_
color: blue;_x000D_
content: "\25B2";_x000D_
margin-top: 1px;_x000D_
}_x000D_
_x000D_
.number-wrapper:before {_x000D_
color: red;_x000D_
content: "\25BC";_x000D_
margin-bottom: 5px;_x000D_
bottom: -.5em;_x000D_
}<span class='number-wrapper'>_x000D_
<input type="number" />_x000D_
</span>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:
_x000D_
_x000D_
_x000D_
_x000D_
<html><head>_x000D_
<style>_x000D_
body {padding: 10px;margin: 10px}_x000D_
input[type=number] {_x000D_
/*for absolutely positioning spinners*/_x000D_
position: relative; _x000D_
padding: 5px;_x000D_
padding-right: 25px;_x000D_
}_x000D_
_x000D_
input[type=number]::-webkit-inner-spin-button,_x000D_
input[type=number]::-webkit-outer-spin-button {_x000D_
opacity: 1;_x000D_
}_x000D_
_x000D_
input[type=number]::-webkit-outer-spin-button, _x000D_
input[type=number]::-webkit-inner-spin-button {_x000D_
-webkit-appearance: inner-spin-button !important;_x000D_
width: 25px;_x000D_
position: absolute;_x000D_
top: 0;_x000D_
right: 0;_x000D_
height: 100%;_x000D_
}_x000D_
</style>_x000D_
<meta name="apple-mobile-web-app-capable" content="yes"/>_x000D_
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0"/>_x000D_
</head>_x000D_
<body >_x000D_
<input type="number" value="1" step="1" />_x000D_
_x000D_
</body></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
A little different to the other answers, using a similar concept but divs instead of pseudoclasses:
_x000D_
_x000D_
_x000D_
_x000D_
input {_x000D_
position: absolute;_x000D_
left: 10px;_x000D_
top: 10px;_x000D_
width: 50px;_x000D_
height: 20px;_x000D_
padding: 0px;_x000D_
font-size: 14pt;_x000D_
border: solid 0.5px #000;_x000D_
z-index: 1;_x000D_
}_x000D_
_x000D_
.spinner-button {_x000D_
position: absolute;_x000D_
cursor: default;_x000D_
z-index: 2;_x000D_
background-color: #ccc;_x000D_
width: 14.5px;_x000D_
text-align: center;_x000D_
margin: 0px;_x000D_
pointer-events: none;_x000D_
height: 10px;_x000D_
line-height: 10px;_x000D_
}_x000D_
_x000D_
#inc-button {_x000D_
left: 46px;_x000D_
top: 10.5px;_x000D_
}_x000D_
_x000D_
#dec-button {_x000D_
left: 46px;_x000D_
top: 20.5px;_x000D_
}<input type="number" value="0" min="0" max="100"/>_x000D_
<div id="inc-button" class="spinner-button">+</div>_x000D_
<div id="dec-button" class="spinner-button">-</div>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.
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:
_x000D_
_x000D_
_x000D_
_x000D_
input[type="number"] {_x000D_
height: 100px;_x000D_
}_x000D_
_x000D_
.number-wrapper {_x000D_
position: relative;_x000D_
}_x000D_
_x000D_
.number-wrapper:hover:after {_x000D_
content: "\25B2";_x000D_
position: absolute;_x000D_
color: blue;_x000D_
left: 100%;_x000D_
margin-left: -17px;_x000D_
margin-top: 12%;_x000D_
font-size: 11px;_x000D_
}_x000D_
_x000D_
.number-wrapper:hover:before {_x000D_
content: "\25BC";_x000D_
position: absolute;_x000D_
color: blue;_x000D_
left: 100%;_x000D_
bottom: 0;_x000D_
margin-left: -17px;_x000D_
margin-bottom: -14%;_x000D_
font-size: 11px;_x000D_
}<span class='number-wrapper'>_x000D_
<input type="number" />_x000D_
</span>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;
}
Source: Stackoverflow.com