No desenvolvimento web, é comum utilizar o elemento <input> com o atributo type=”number” para capturar valores numéricos dos usuários. No entanto, por vezes, desejamos ocultar as setas padrão que são exibidas nesse tipo de input. Nesta postagem, iremos explorar um método para esconder as setas do input number utilizando somente CSS para realizar essa tarefa.
Conteúdo
Passo 1: Criando o elemento input
A princípio, vamos mostrar como criar o elemento <input> com o atributo type=”number” no HTML. Esse será o ponto de partida para aplicarmos o estilo e ocultarmos as setas.
Comece adicionando o seguinte código HTML ao seu arquivo:
<input type=”number”>
Passo 2: Aplicando o estilo ao elemento
Agora que temos o código HTML pronto, precisamos selecionar o <input> desejado para adicionar seu estilo. Para isso, adicione a classe ou ID para ser o seletor do elemento <input> criado no passo 1.
No nosso caso, para facilitar a seleção do elemento <input> no CSS, atribuímos a ele uma classe chamada “input-number”. Isso nos permitirá aplicar estilos personalizados de forma direcionada.
Se você não tem habilidade em CSS, recomendamos que siga o tutorial que explora o que é o css e sua estrutura básica, este é um guia destinado a quem está começando a codificar.
Também temos uma série de tutorias ensinando a criar uma página inteira só com HTML e CSS.
Exemplo:
<input type="number" class="input-number">
Estilizando o elemento input
Para ocultar as setas do <input type=”number”>, vamos aplicar um estilo personalizado ao elemento utilizando CSS.
Ao criar uma classe ou um seletor específico para o <input>, podemos definir estilos personalizados que serão aplicados somente a esse elemento.
.input-number {
/* Adicione aqui os estilos personalizados */
}
Dica: Utilizando classes e IDs
É uma boa prática utilizar classes e IDs para direcionar elementos específicos em CSS. Isso ajuda a manter o código mais organizado e facilita a manutenção no futuro. Ao adicionar a classe ou o seletor ao elemento desejado, certifique-se de selecionar corretamente o elemento no CSS.
Utilizando a propriedade -webkit-appearance para esconder as setas do input number
Uma maneira de ocultar as setas é utilizando a propriedade -webkit-appearance com o valor none. Essa propriedade permite controlar a aparência de elementos em navegadores que utilizam o motor WebKit, como o Google Chrome e o Safari.
Para ocultar as setas do <input type=”number”>, adicione a propriedade -webkit-appearance com o valor none à classe ou seletor criado no passo 2.
Para funcionar corretamente também adicione ao seletor o ::-webkit-inner-spin-button que é um pseudo-elemento específico do WebKit.
No entanto, vale ressaltar que no Firefox deve adicionar apenas a propriedade -moz-appearance: textfield;
Exemplo:
.input-number::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.input-number {
-moz-appearance: textfield;
}
Estilizando o elemento para esconder as setas do input number
Além de utilizar a propriedade -webkit-appearance, você pode adicionar outros estilos personalizados para ocultar as setas e adaptar o elemento de acordo com as necessidades do seu projeto. Por exemplo, você pode definir a largura, altura, cor de fundo, bordas e outros estilos para personalizar o visual do <input>.
Por exemplo, você pode definir a largura, altura, cor de fundo e outras propriedades para personalizar o elemento de acordo com o design do seu projeto.
Exemplo:
.input-number::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.input-number {
-moz-appearance: textfield;
width: 200px;
height: 40px;
background-color: #f2f2f2;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
/* Adicione aqui outros estilos personalizados */
}
Exemplo completo de como esconder as setas do input number
Aqui está um exemplo completo que mostra como ocultar as setas do <input type=”number”> utilizando apenas CSS:
<!DOCTYPE html>
<html>
<head>
<style>
.input-number::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.input-number {
-moz-appearance: textfield;
width: 200px;
height: 40px;
background-color: #f2f2f2;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
/* Adicione aqui outros estilos personalizados */
}
</style>
</head>
<body>
<input type="number" class="input-number">
</body>
</html>
Conclusão do tutorial como esconder as setas do input number
Nesta postagem, exploramos como ocultar as setas do <input type=”number”> utilizando apenas CSS. Através da propriedade -webkit-appearance: none e estilos personalizados, conseguimos remover as setas padrão e adaptar o visual do elemento. Lembre-se de utilizar classes e IDs para direcionar elementos específicos, facilitando a aplicação do estilo desejado.
Como se tornar um desenvolvedor Web?
Certamente deve estar animado para começar a sua jornada, saiba que estou focado para fazer conteúdos excepcionais que irão te ajudar! Então não perca tempo e cadastre-se logo abaixo para não perder nenhuma novidade e ficar sempre por dentro
