12

Como personalizar o input type='number' como a imagem a seguir?

ilustração do campo com controles + e -

Clicando no +/- soma ou subtrai o número dentro do box.

Atualmente meu código é:

.bedrooms
      = f.input :bedrooms, :label => false, as: "number", placeholder: 'Quantos quartos?', min: 0

o que resulta na seguinte imagem:

ilustração do campo sem controles + e -

um type='number' padrão, quero saber como estilizar para mudar as setas cima/baixo para um icone ou imagem de +/-

7
  • 1
    Não creio que seja possível estilizar as setinhas. Você terá que criar algo um pouco mais complexo para criar os botões de + e -. Isso envolverá JS. Commented 12/10/2018 às 21:02
  • 3
    Acredito que no sei caso a solução é esconder as setinhas originais do input, e criar dois btns falsos que vão somar ou subtrair no value desse input. Modificar as setinhas originais acho que vc não vai conseguir...
    – hugocsl
    Commented 12/10/2018 às 21:19
  • 1
    Da uma olhada nessa solução Demo Solução Acredito que é isso que você procura.
    – Renan
    Commented 12/10/2018 às 22:04
  • 1
    @RORSCHACH me desculpe, mas olhei lá e não vi onde que ele customizou as seta...!? Eu só vi que ele removeu a seta default padrão do input, acho que é por isso que o artigo chama Turn Off Number Input Spinners , mas não vi nada dele fazendo uma seta nova pro input? Ou estou errado?
    – hugocsl
    Commented 17/10/2018 às 19:42
  • 1
    @RORSCHACH poie é.... é o que eu falei ali no segundo comentário dessa pergunta ;)
    – hugocsl
    Commented 17/10/2018 às 20:07

4 Respostas 4

9

Os botões padrões de incremento e decremento foram desativados, e em vez disso foram colocados os personalizados:

function mais(){
  var atual = document.getElementById("total").value;
  var novo = atual - (-1); //Evitando Concatenacoes
  document.getElementById("total").value = novo;
}

function menos(){
  var atual = document.getElementById("total").value;
  if(atual > 0) { //evita números negativos
    var novo = atual - 1;
    document.getElementById("total").value = novo;
  }
}
*{
margin:0;
}
div{
margin-top:10%;
}

input[type="number"] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none;
}
input[type="number"]{
outline:none;
border-right: 0px;
border-top: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
height: 20px;
padding:1%;
border-right: 0 px solid black;
}
label, input, button {
    font-size: inherit;
    padding: 0.2em;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}
button{
height:20px;
padding:1%;
border-top: 1px solid black;
border-bottom: 1px solid black;
background-color: white;
border-left: 0px solid black;
padding-left:2%;
padding-right:2%;
outline:none;
cursor: pointer;

}
button.a{
  border-right: 0px solid black;
}
button.b{
    border-right: 1px solid black;
}
<center>
<div>

  <input placeholder="Quantos quartos?" min=0 id="total" type="number"><button onclick="menos()" class="a">-</button><button onclick="mais()" class="b">+</button>

</div>
</center>

Digno de nota

Para desativar as setas padrões do input type='number' deve-se fazer o seguinte código:

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
<input type="number">

5
  • 1
    Bom, apenas coloquei uma verificação para evitar números negativos na hora da subtração Commented 17/10/2018 às 19:53
  • @JorgeMatheus bem apontada sua sugestão, uma vez que se refere ao número de quartos, e este não pode ser negativo. Commented 17/10/2018 às 19:57
  • 1
    Realizei a edição :) +1 Commented 17/10/2018 às 19:58
  • 1
    Agora sim! Ficou massa o exemplo!
    – hugocsl
    Commented 17/10/2018 às 20:13
  • 1
    @hugocsl Sabe que até que eu gostei desse design também, quando eu vi a pergunta eu achei a ideia muito boa. Commented 17/10/2018 às 20:15
6

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.

inserir a descrição da imagem aqui

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.

inserir a descrição da imagem aqui

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 } inserir a descrição da imagem 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>

4
  • 1
    Gostei muito de sua solução usando CSS. Torna o código bem clean. Commented 27/03/2019 às 11:24
  • 1
    @RORSCHACH muito obrigado meu caro! Não é tão crossbrowser quanto a sua, mas da pra fazer os jeitinhos do css :), a vantagem é que fica mais customizável aproveita o máximo do componente original, assim ele funciona mais próximo do input default do sistema, inclusive com a contagem positiva ou negativa etc... valeu a força 💪
    – hugocsl
    Commented 27/03/2019 às 11:30
  • 1
    Curiosidade @hugocsl , você usa o peek para fazer estes GIFs? Sem dúvida são muito instrutivos a comunidade. Commented 17/07/2020 às 2:10
  • 1
    @RenatoJunior valeu Renato! Cara para Windows e Linux eu usava o ScreanToGif, mas agora que estou no iOS tenho usado o GiFox, abs
    – hugocsl
    Commented 17/07/2020 às 11:08
5

Os controles input[type=number] nativos não são cross-browser capazes de serem estilizados. A maneira mais fácil e segura de obter o que você deseja:

input[type="number"] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none;
}

Isso permite que você use seus botões personalizados, que podem ser vinculados para executar as funções que os spinners(setas) fariam (.stepUp() e .stepDown()), desde que você mantenha as entradas type="number".

Por exemplo:

input[type="number"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.number-input {
  border: 2px solid #ddd;
  display: inline-flex;
}

.number-input,
.number-input * {
  box-sizing: border-box;
}

.number-input button {
  outline:none;
  -webkit-appearance: none;
  background-color: transparent;
  border: none;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  margin: 0;
  position: relative;
}

.number-input button:before,
.number-input button:after {
  display: inline-block;
  position: absolute;
  content: '';
  width: 1rem;
  height: 2px;
  background-color: #212121;
  transform: translate(-50%, -50%);
}
.number-input button.plus:after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.number-input input[type=number] {
  font-family: sans-serif;
  max-width: 5rem;
  padding: .5rem;
  border: solid #ddd;
  border-width: 0 2px;
  font-size: 2rem;
  height: 3rem;
  font-weight: bold;
  text-align: center;
}
<div class="number-input">
  <button onclick="this.parentNode.querySelector('input[type=number]').stepDown()" ></button>
  <input class="quantity" min="0" name="quantity" value="1" type="number">
  <button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus"></button>
</div>

-2

No Chrome para desaparecer com as setas basta incluir no CSS: input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } A partir daí você tem a opção de construir os próprios botões e controlar os clicks ou simplesmente deixar sem mantendo o teclado numérico para o mobile.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .