6

Colegas.

Estou usando o código abaixo para quando o usuário acessar pelo smartphone, aparecer o teclado de números:

<input type="number" value="" class="form-control">

Porém no desktop, quando clicamos dentro do campo, aparece setas:

inserir a descrição da imagem aqui

Como faria para otimizar e retirar essas setas? Teria alguma outra solução?

1

3 Respostas 3

11

baseado nessa :pergunta, você pode utilizar a propriedade -moz-appearance, a qual é utilizada para exibir um elemento usando o estilo nativo da plataforma com base no tema do sistema operacional.

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

}

 
<input type="number" />

9
  • Funciona em todos os navegadores?
    – Florida
    Commented 15/01/2017 às 22:42
  • 2
    Não, difícil algo que funciona em "todos" os navegadores....
    – MagicHat
    Commented 15/01/2017 às 22:43
  • Me referi aos mais conhecidos como chrome, firefox ou opera.
    – Florida
    Commented 15/01/2017 às 22:45
  • 1
    Hum, sim com a edição sim....
    – MagicHat
    Commented 15/01/2017 às 22:47
  • Testei esse código aqui e não funcionou, utiilizo o bootstrap. Commented 15/01/2017 às 22:53
0

Eu testei o ::-webkit-inner-spin-button com o parâmetro -webkit-appearance: none; como vocês haviam dito, e realmente não funcionou no meu foto_vscode. Por alguma razão, acredito que esse -webkit-appearance esteja em desuso...

A alternativa que eu encontrei foi:

<style>
    input[type=number]::-webkit-inner-spin-button{
    appearance: none; 
}
</style>
3
  • Como está escrito atualmente, sua resposta não é clara. Por favor, pode editar para adicionar mais detalhes, que ajudarão outras pessoas a entender como isso resolve a pergunta feita. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 6/06 às 16:26
  • Funcionou no meu editor VS Code, nem sempre as extensões conseguiram tratar tudo referente a uma linguagem, no entanto verique a compatibilidade do código colocando ele no servidor para ter certeza que o Servidor de Hospedagem do Site consegue ou não reproduzir o efeito necessário nos browsers que suportam este código. E coloque a segunda parte do código CSS tambem. Commented 8/06 às 15:10
  • ::-webkit-inner-spin-button Fora do padrão: Este recurso não é padrão e não está no caminho dos padrões. Não use-o em sites de produção voltados para a Web: não funcionará para todos os usuários. Também pode haver grandes incompatibilidades entre implementações e o comportamento pode mudar no futuro. [Link}(developer.mozilla.org/en-US/docs/Web/CSS/…) Commented 8/06 às 15:15
-1

adicione este comando no seu css

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

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