Como esconder o contador do input number

Neste artigo você vai aprender a esconder o contador do input number, ou seja, deixar apenas o input type number sem o botão de modificação de quantidade

Fala programador(a), beleza? Bora aprender mais sobre HTML, CSS e também inputs de formulários!

Para remover este elemento do input number vamos precisar de alguns recursos, que ainda não estão totalmente adaptados aos navegadores

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Vamos precisar do -webkit-, uma forma de utilizar recursos que ainda não são padronizados

Veja o código necessário para esconder o contador do input de números:

<input type="number" />

Este é o input do tipo number, nosso HTML necessário para realizar a ação

Agora veja o CSS:

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

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

A primeira regra tem o webkit, serve para remover o elemento de navegadores como o Chrome

Já no Firefox devemos utilizar a segunda opção, mais simples, concorda? 🙂

E assim removemos aquele elemento que permite trocar a quantidade do número que está inserido no input!

Conclusão

Neste artigo você aprendeu a como esconder o contador do input number com HTML e CSS

Precisamos utilizar alguns recursos que ainda não estão padronizados nos navegadores, com -moz- e -webkit-

Porém, a aplicação é simples e eficaz para resolver o problema!

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!