Vou dar uma resposta apenas com CSS já que tem a tag CSS na pergunta...
Mas já adianto que ela só vai funcionar em browsers -webkit- ou seja só vai funcionar no Chrome, Safari e em breve no Edge, sim no Edge vai usar o motor de renderização do Chromium muito em breve. Atualmente o Edge já usa -webkit- em algumas propriedade como vc pode ver aqui
Agora vamos ao código.
Opção 1
Vamos limpar os estilos originais do pseudo-elemento
::-webkit-inner-spin-button que é normalmente estilizado pelo próprio user-agent
do Chromium, Como vc pode ver esse pseudo elemento usa o vendor prefix -webkit-
, por isso falei que só funciona em browser com esse motor de renderização.
Depois de remover os estilos originas com um all:unset
vamos construir nosso indicadores usando linear-gradiente para fazer um -
e um +
dentro da área de click do 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="">
Opção 2
Aqui vamos customizar o próprio elemento original, sem remove-lo, vamos usar padding
, width
e heigth
para controlar o tamanho, e margin
para ajustar dentro do input
. Depois com filter vamos trocar a cor, e com rotate()
colocar ele na horizontal.
Segue o código da imagem acima.
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 para o FireFox
mas que pode ser adaptado para outros navegadores...
Apesar do FireFox tb ter seus pseudo-elementos (::-moz-number-spin-box
, ::-moz-number-spin-up
e ::-moz-number-spin-down
) para customizar o input[number]
parece que o browser não reconhece a formatação feita no CSS e continua com o estilo do user-agent
. Vc ponde consultar aqui o CSS padrão do user-agente
do FireFox -moz-
Então o workaround é colocar o input
dentro de uma label
e nessa label
usar os pseudo-elementos ::after
e ::before
para "encobrir" o botão default do FireFox. Depois é importante colocar nesses pseudo-elementos a propriedade pointer-events: none;
. Assim quando vc clicar nele na verdade vc vai estar clicando nas setinhas originais do input
que estão por baixo 😆
Esse CSS só vai ser apicado no FireFox usando @-moz-document url-prefix() { css aqui
}
O botão de +
e -
também foi feito usando linera-gradiente
, ms vc pode usar até um gif animado
ali se quiser....
IMPORTANTE: No FF não da para colocar os elementos um ao lado do outro, pq eu tenho que clicar no elemento que está abaixo dele fixo para aumentar e diminuir o valor. E para o CSS nesse caso é só para o FF, esse estilo não vai ser para o -webkit
- que vc pode continuar fazendo como mencionada acima. Para isso coloque o CSS desse input
dentro dessa regra @-moz-document url-prefix() { css aqui
}
A opção abaixo SÓ funciona no 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>
+
e-
. Isso envolverá JS.Turn Off Number Input Spinners
, mas não vi nada dele fazendo uma seta nova pro input? Ou estou errado?