Como Estilizar o Texto de Placeholder para Campos de Formulário

Você tem interesse em personalizar a aparência do texto de placeholder nos campos do seu formulário WPForms? Com algumas linhas de CSS personalizado, você pode conseguir isso facilmente. O texto de placeholder serve como informação temporária dentro de um campo e desaparece quando o usuário interage com o campo. No artigo a seguir, vamos guiá-lo através do processo de estilização do texto de placeholder para os campos do seu formulário.

Lembre-se de que a estilização padrão para o texto de placeholder pode ser herdada de diferentes fontes, incluindo seu tema WordPress, as configurações do WPForms (dependendo das suas configurações) ou as configurações do navegador do usuário.

Antes de começar a estilizar os placeholders, primeiro precisamos criar um formulário que utilize esse texto. Depois de criar seu formulário, você precisará adicionar seu texto de Placeholder para cada campo na aba Avançado das configurações do campo.

Estilizando o texto de placeholder

Ao estilizar o texto de placeholder, é essencial incluir vários seletores, cada um com seu próprio prefixo de fornecedor. Isso garante que os estilos sejam aplicados de forma consistente em diferentes navegadores e versões. Embora o CSS possa parecer repetitivo, incluir todos os seletores é crucial para um suporte abrangente de navegadores.

Para implementar esses estilos em seu site, basta adicionar o seguinte CSS. Se você não tem certeza de onde ou como adicionar CSS personalizado, pode consultar nosso tutorial sobre o assunto.

O CSS fornecido abaixo mudará todo o texto de placeholder do WPForms para uma cor laranja (#e27730):

.wpforms-container ::-webkit-input-placeholder { /* Chrome and Safari */
   color: #e27730 !important;
}
 
.wpforms-container :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: #e27730 !important;
   opacity: 1 !important;
}
 
.wpforms-container ::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #e27730 !important;
   opacity: 1 !important;
}
 
.wpforms-container :-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: #e27730 !important;
}
 
.wpforms-container ::-ms-input-placeholder { /* Microsoft Edge */
   color: #e27730 !important;
}
 
.wpforms-container ::placeholder {
   color: #e27730 !important;
}

O Firefox aplicará automaticamente uma opacidade menor a todos os placeholders dos campos de formulário, tornando-os mais transparentes do que outros navegadores.

Isso já é abordado no CSS acima, definindo a opacidade para o CSS específico do Firefox como opacidade: 1;

E é tudo o que você precisa para estilizar o texto de placeholder. Gostaria de alterar a estilização da mensagem de confirmação usando CSS? Em nosso tutorial, Como Remover a Estilização da Caixa de Mensagem de Confirmação, mostraremos como alterar essa estilização.

Perguntas Frequentes

P: Posso usar este CSS para estilizar um campo de dropdown?

R: Se você quiser estilizar o campo Dropdown, por favor, dê uma olhada neste artigo em vez disso.