Como Remover as Setas no Campo de Números

Você tem interesse em remover as setas padrão que aparecem no campo Números do WPForms? É comum que navegadores como Chrome, Safari e Firefox apliquem sua própria formatação padrão a campos de formulário, incluindo a exibição de setas em campos de Números. Se você deseja remover essas setas, podemos guiá-lo através do processo.

Com um pouco de CSS, você 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.

Removendo as setas no campo de Números

Para remover essa formatação, precisaremos copiar e colar o CSS personalizado em nosso site.

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

Para um formulário específico

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

Se precisar de ajuda sobre como encontrar o ID do seu formulário, por favor, confira 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 você quiser apenas remover as setas de todos os seus formulários, você 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 aceitos dentro do campo de formulário Números, mas após adicionar o CSS, você não verá mais as setas no campo.

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