18.01.2025

Como Estilizar Botões de Incremento e Decremento em <input type="number"> com CSS

Resposta Rápida

Para ocultar os botões padrão de incremento e decremento em um campo de entrada numérica e conseguir uma estilização detalhada, você pode usar as seguintes regras de CSS:

/* Para Chrome e Safari */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Para Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

/* Para Internet Explorer e Edge */
input[type="number"]::-ms-clear {
  display: none;
}

Personalize a aparência deste campo de entrada com as seguintes propriedades:

input[type="number"] {
  background-color: #f2f2f2;
  color: #333;
  font-family: sans-serif;
}

Ajuste ainda mais o estilo dos botões de incremento e decremento no Chrome com:

/* Estilo para o botão de incremento */
input[type="number"]::-webkit-inner-spin-button {
  background-color: blue;
}

/* Estilo para o botão de decremento */
input[type="number"]::-webkit-outer-spin-button {
  background-color: red;
}

Estilos Avançados para Botões de Controle

Se você deseja transformar os botões de controle, considere as seguintes dicas:

Criando Botões de Controle Personalizados

Para criar seus próprios botões, primeiro você precisa ocultar os padrões:

/* Ocultando botões de controle padrão no Chrome */
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  height: 0;
  opacity: 0;
}

Agora, adicione seus elementos de controle:

.spinner-arrows {
  position: absolute;
  right: 5px;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

/* Botão personalizado para incrementar valor */
.spinner-arrows .up {
  background-color: blue;
}

/* Botão personalizado para decrementar valor */
.spinner-arrows .down {
  background-color: red;
}

Estilo Universal para Botões de Controle

Compatibilidade entre navegadores é sempre um desafio, mas pode ser alcançada com essas dicas:

/* Para IE11 e versões anteriores */
input[type="number"] {
  -ms-appearance: textfield;
}

/* Para Edge, onde os pseudo-elementos para botões não estão presentes, 
   métodos de estilo alternativos devem ser empregados */

Garantindo Funcionalidade

Os botões não devem ser apenas visualmente atraentes, mas também funcionais:

.spinner-arrows div {
  pointer-events: none;
}

/* Permitir eventos de clique do mouse em elementos ativos */
.spinner-arrows div * {
  pointer-events: auto;
}

Notas sobre Estilização dos Botões de Controle

Compatibilidade entre Navegadores

Alcançar uma funcionalidade consistente em diversos navegadores pode ser um desafio considerável.

Acessibilidade

Não se esqueça da acessibilidade. Todos os controles devem ser utilizáveis com leitores de tela.

Uniformidade Estética

Garanta que a aparência dos seus botões personalizados esteja alinhada com o design geral do seu site.

Visualização

A aparência padrão e aprimorada do campo de entrada numérica pode ser descrita da seguinte maneira:

Visualização Padrão:	🚗 Campo de Entrada
Visualização Aprimorada:	🚗🔳⚫🔄 Campo de Entrada

A personalização básica é semelhante a repintar um carro:

input[type="number"] {
  color: red;
  background: yellow;
}

O aprimoramento é como adicionar rodas esportivas e um aerofólio:

/* Para Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

/* Para Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

Assim como o ajuste de um carro, você tem o poder de ajustar finamente cada elemento da aparência do campo de entrada numérica.

Recursos Úteis

1. <input>: Elemento de entrada (formularios) - HTML | MDN — Descrição completa do elemento <input> da Mozilla.
2. HTML input type="number" — Diretrizes simples para usar e estilizar <input type='number'>.
3. Estilização de controles deslizantes de alcance entre navegadores com CSS | CSS-Tricks — Técnicas para estilização entre navegadores de elementos de entrada.
4. Exceção de vinculação no Spring quando um formulário é enviado - Stack Overflow — Discussões e soluções para problemas de estilo com type=number.
5. Estilizando formulários web - Aprenda desenvolvimento web | MDN — Um guia para criar estilos para formulários HTML.
6. WebAIM: Criando Formulários Acessíveis - Controles de Formulário Acessíveis — Melhores práticas para criar formulários acessíveis.
7. Can I use... Tabelas de suporte para HTML5, CSS3, etc. — Tabelas de suporte para <input type="number"> em diferentes navegadores.

Video

Navigation