Como Remover as Setas no Campo de Números

Tem interesse em remover as setas predefinidas que aparecem no campo Números do WPForms? É comum que navegadores como Chrome, Safari e Firefox apliquem o seu próprio estilo predefinido aos campos de formulário, incluindo a exibição de setas nos campos de Números. Se desejar remover estas setas, podemos guiá-lo através do processo.

Com apenas um pouco de CSS, pode alterar sem esforço a aparência do campo do formulário. Neste tutorial, forneceremos o CSS necessário para eliminar as setas do campo.

Remover as setas no campo de Números

Para remover este estilo, precisaremos de copiar e colar o CSS personalizado no nosso site.

Se precisar de alguma ajuda sobre como e onde adicionar o seu CSS personalizado, por favor, reveja este tutorial.

Para um formulário específico

Este CSS será aplicado apenas aos campos de formulário Número no formulário específico com o ID 612. Terá de atualizar este ID antes de usar este CSS.

Se precisar de ajuda sobre como encontrar o ID do seu formulário, por favor, consulte este tutorial.

form#wpforms-form-612 input[type="number"]::-webkit-outer-spin-button, form#wpforms-form-612 input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
 
form#wpforms-form-612 input[type="number"] {
    -moz-appearance: textfield;
}

Para todos os formulários

Se apenas quiser remover as setas para todos os seus formulários, usaria este CSS.

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

Este CSS não altera a funcionalidade do campo do formulário. Apenas números são aceites dentro do campo de formulário Números, mas após adicionar o CSS, já não verá as setas no campo.

E é tudo o que precisa para remover as setas para cima e para baixo no campo Números. Gostaria de estilizar outros campos de formulário também? Consulte o nosso artigo sobre Como Adicionar Estilo a Campos Baseados em Texto.