-2

Estava elaborando um formulário e um dos campo só é necessário aceitar numero, então eu pensei, porque eu não utilizo input do tipo number? isso vai ser bom até para acessibilidade, não precisa fazer "scripts" para tratar esse input.

Mas essas "setas" dentro do input do tipo number, ou do datalist me gera um curto desconforto e ai surge minha grande duvida.

É possível remover essas "setas"?

Nota pessoal: posso estar assumindo errado, mas creio que isso é gerado pelo navegador e não tem algum tipo de estilo ou tag para alterar isso.

<input type="number" name="numero" min="0" max="100">

                   <br>

                   <input type="text" name="texto" list="alpha">

                   <datalist id="alpha">
                     <option>Something</option>
                     <option>else</option>
                     <option>Select-me</option>
                     <option>Some text with space</option>
                     <option>minding blowing</option>
                   </datalist>

3
  • NOTA: alguém anda negativando as perguntas do stack overflow brasil, realizei a pergunta em menos de 2 minutos, ja fui negativado. Commented 5/03/2020 às 18:11
  • Acho que esse link pode te ajudar: pt.stackoverflow.com/questions/336061/… Commented 5/03/2020 às 18:20
  • Obrigado, porem não é tão preciso quanto a resposta que me forneceram. Commented 5/03/2020 às 18:27

2 Respostas 2

1

Sim, é possível, utilizando CSS.

Para remover as setas do campo numérico, faça da seguinte forma:

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}
<input type="number" name="numero" min="0" max="100">

Já para remover da lista, faça assim no chrome:

input::-webkit-calendar-picker-indicator {
  display: none;
}
<input type="text" name="texto" list="alpha">

<datalist id="alpha">
 <option>Something</option>
 <option>else</option>
 <option>Select-me</option>
 <option>Some text with space</option>
 <option>minding blowing</option>
</datalist>

5
1

Creio que desta maneira irá te ajudar.

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
<input type="number" name="numero" min="0" max="100">

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