I’ll give you an answer with CSS only since you have the CSS tag in the question...
But already I say that it will only work in browsers -Webkit- IE will only work in Chrome, Safari and soon in the Edge, yes in Edge will use the rendering engine of Chromium very soon. Currently the Edge already uses -Webkit- in some property as you can see here
Now let’s go to the code.
Option 1
Let’s clean up the original styles of pseudo-elemento
::-Webkit-Inner-spin-button which is normally stylised by user-agent
of Chromium, As you can see this pseudo element uses the prefix vendor -webkit-
, so I said it only works in browser with this rendering engine.
After removing the original styles with a all:unset
we will build our indicators using linear-gradient to make a -
and a +
within the click area of input
.
input {
font-size: 20px;
padding:6px;
}
input[type=number]::-webkit-inner-spin-button {
all: unset;
min-width: 21px;
min-height: 45px;
margin: 17px;
padding: 0px;
background-image:
linear-gradient(to top, transparent 0px, transparent 16px, #fff 16px, #fff 26px, transparent 26px, transparent 35px, #000 35px,#000 36px,transparent 36px, transparent 40px),
linear-gradient(to right, transparent 0px, transparent 10px, #000 10px, #000 11px, transparent 11px, transparent 21px);
transform: rotate(90deg) scale(0.8, 0.9);
cursor:pointer;
}
<input type="number" value="1" autofocus name="" id="">
Option 2
Here we will customize the original element itself, without removing it, we will use padding
, width
and heigth
to control size, and margin
to fit inside the input
. Then with filter we will change the color, and with rotate()
lay him flat.
Follow the image code above.
input {
font-size: 20px;
}
input[type=number]::-webkit-inner-spin-button {
width: 30px;
height: 50px;
margin: 17px;
padding: 5px;
transform: rotate(90deg);
filter: sepia(100%) hue-rotate(90deg);
cursor: pointer;
}
<input type="number" value="1" autofocus name="" id="">
Workaround for Firefox
but that can be adapted to other browsers...
Although Firefox tb has its pseudo-elements (::-moz-number-spin-box
, ::-moz-number-spin-up
and ::-moz-number-spin-down
) to customize the input[number]
it seems that the browser does not recognize the formatting done in CSS and continues with the style of user-agent
. You can refer here to the standard CSS of user-agente
firefox -moz-
Then the workaround is to put the input
within a label
and in that label
use the pseudo-elements ::after
and ::before
to "cover up" the button default Firefox. Then it is important to put in these pseudo-elements the property pointer-events: none;
. So when you click on it you will actually be clicking on the original arrows of input
that are underneath
This CSS will only be beefed into Firefox using @-moz-document url-prefix() { css aqui
}
The button of +
and -
was also made using linera-gradiente
, ms you can use up a gif animado
there if you want....
IMPORTANT: In the FF do not to place the elements next to each other, because I have to click on the element that is below it fixed to increase and decrease the value. And for the CSS in this case it’s just for the FF, this style is not going to be for the -webkit
- that you can continue to do as mentioned above. To do this put the CSS of this input
within that rule @-moz-document url-prefix() { css aqui
}
The option below ONLY works on FIREFOX
input {
font-size: 20px;
padding: 0;
}
/* Esses estilos só serão aplicado no FireFox */
@-moz-document url-prefix() {
label {
position: relative;
}
label::before,
label::after {
content: "";
display: inline-block;
position: absolute;
width: 15px;
height: 13px;
background-color: #fff;
background-image:
linear-gradient(to right, transparent 0px, transparent 7px, black 7px, black 8px, transparent 8px, transparent 15px),
linear-gradient(to bottom, #fff 0px, #fff 5px, black 5px, black 6px, #fff 6px, #fff 9px);
z-index: 3;
pointer-events: none;
right: 5px;
background-position-y: -11.5px;
top: -42%;
transform: scale(0.9);
border: 2px solid #fff;
}
label::after {
background-image:
linear-gradient(to bottom, #fff 0px, #fff 4px, black 4px, black 5px, #fff 5px, #fff 6px, transparent 6px);
top: 30%;
z-index: 2;
height: 6px;
}
}
<label>
<input type="number" value="1" autofocus name="" id="">
</label>
I don’t think it is possible to style the arrows. You will have to create something a little more complex to create the buttons
+
and-
. This will involve JS.– Luiz Felipe
I believe that I do not know if the solution is to hide the original arrows of the input, and create two false btns that will add or subtract in the value of this input. Modify the original arrows I think you won’t be able...
– hugocsl
Take a look at this solution Demo Solution I believe this is what you seek.
– Renan
@Luizfelipe Yes, just disable the default buttons
– Renato Junior
@RORSCHACH I’m sorry, but I looked there and I didn’t see where he customized the arrow...!? I just saw that he removed the default arrow from the input, I think that’s why the article calls
Turn Off Number Input Spinners
, but I didn’t see anything of him doing a new arrow pro input? Or I’m wrong?– hugocsl
@hugocsl can only deactivate them.
– Renato Junior
@RORSCHACH It is.... is what I said there in the second comment of this question ;)
– hugocsl