Styling input type number - css

Question

I am trying to stylize the input type number. In this way: https://ant.design/components/input-number/ (first input). But without using the ant design framework. Where there are inner-spin, outer-spin I am trying add white background, gray lines and change the inner-spin color, outer-spin. Change the background color I can, but I can not spinns any more. I can not see them.
I can use the bootstrap-react framework, but I do not see such a number input
Code here: https://stackblitz.com/edit/react-cojnud
input[type=number] {
line-height: 27px;
box-sizing: border-box;
font-variant: tabular-nums;
line-height: 1.5;
list-style: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
position: relative;
width: 100%;
height: 32px;
padding: 4px 11px;
color: rgba(0,0,0,0.65);
font-size: 14px;
line-height: 32px;
background-image: none;
-webkit-transition: all .3s;
transition: all .3s;
display: inline-block;
width: 90px;
margin: 0;
padding: 0;
border: 1px solid #d9d9d9;
border-radius: 4px;
}
input[type=number].mod::-webkit-inner-spin-button {
width: 30px;
height: 30px;
position: relative;
display: block;
overflow: hidden;
color: rgba(0,0,0,0.45);
font-weight: bold;
line-height: 0;
text-align: center;
-webkit-transition: all .1s linear;
transition: all .1s linear;
background-color: #fff;
}
input[type=number]::-webkit-inner-spin-button:hover {
color: blue;
}
input[type=number]:hover {
border-color: #40a9ff;
border-right-width: 1px !important;
}
input[type="number"].mod::-webkit-inner-spin-button {
-webkit-appearance: none;
background-color: white;
color: black;
}

Answer 1

Hy there,
try to remove -webkit-appearance: none;
And you will see the spinners again!

Answer 2

You won't be able to modify it across browsers. Better to use it following manner:
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
input[type=number] {
-moz-appearance:textfield; /* Firefox */
}
.number-wrapper {
position: relative;
width: 300px;
height: 30px;
}
.number-wrapper input {
width: 100%;
height: 30px;
box-sizing: border-box;
padding-right: 18px;
text-align: right;
}
.number-wrapper .rocker {
position: absolute;
background: #FFF;
border: 1px solid lightblue;
right: 0;
padding: 2px 4px;
color: #ccc;
transition: all ease-in 100ms;
height: 50%;
box-sizing: border-box;
line-height: 12px;
cursor: pointer;
visibility: hidden;
}
.number-wrapper:hover .rocker {
visibility: visible;
transition: all ease-in 300ms;
}
.number-wrapper .rocker.up {
top: 0;
}
.number-wrapper .rocker.down {
bottom: 0;
transform: rotate(180deg);
border-bottom: none;
}
.number-wrapper .rocker:hover,
.number-wrapper .rocker:focus {
box-shadow: 0 0 4px lightblue;
}
.number-wrapper .rocker:active {
transform: scale(0.4);
}
.number-wrapper .rocker.down:active {
transform: rotate(180deg) scale(0.4);
}
<div class="number-wrapper"><span class="rocker up">^</span><span class="rocker down">^</span><input class="mod" type="text" /></div>

Answer 3

Try This
jQuery('<div class="quantity-nav"><div class="quantity-button quantity-up">⮙</div><div class="quantity-button quantity-down">⮛</div></div>').insertAfter('.quantity input');
jQuery('.quantity').each(function() {
var spinner = jQuery(this),
input = spinner.find('input[type="number"]'),
btnUp = spinner.find('.quantity-up'),
btnDown = spinner.find('.quantity-down'),
min = input.attr('min'),
max = input.attr('max');
btnUp.click(function() {
var oldValue = parseFloat(input.val());
if (oldValue >= max) {
var newVal = oldValue;
} else {
var newVal = oldValue + 1;
}
spinner.find("input").val(newVal);
spinner.find("input").trigger("change");
});
btnDown.click(function() {
var oldValue = parseFloat(input.val());
if (oldValue <= min) {
var newVal = oldValue;
} else {
var newVal = oldValue - 1;
}
spinner.find("input").val(newVal);
spinner.find("input").trigger("change");
});
});
.quantity {
position: relative;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button
{
-webkit-appearance: none;
margin: 0;
}
input[type=number]
{
-moz-appearance: textfield;
border-radius: 5%;
}
.quantity input {
width: 45px;
height: 35px;
line-height: 1.65;
float: left;
display: block;
padding: 0;
margin: 0;
padding-left: 20px;
border: 1px solid #eee;
}
.quantity input:focus {
outline: 0;
}
.quantity-nav {
float: left;
position: relative;
height: 40px;
}
.quantity-button {
position: relative;
cursor: pointer;
border-left: 1px solid #eee;
width: 20px;
text-align: center;
color: #333;
font-size: 13px;
font-family: "Trebuchet MS", Helvetica, sans-serif !important;
line-height: 1.7;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.quantity-button.quantity-up {
position: absolute;
height: 46%;
top: 0;
margin-top: 0px;
border-bottom: 1px solid #eee;
}
.quantity-button.quantity-down {
position: absolute;
bottom: 4px;
height: 46%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="quantity">
<input type="number" min="1" step="1" value="1">
</div>
See Code Link