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

Tem interesse em personalizar a aparência do texto de espaço reservado nos campos do seu formulário WPForms? Com algumas linhas de CSS personalizado, pode conseguir isto facilmente. O texto de espaço reservado serve como informação temporária dentro de um campo e desaparece quando um utilizador interage com o campo. No seguinte artigo, iremos guiá-lo através do processo de estilização do texto de espaço reservado para os seus campos de formulário.

Tenha em atenção que o estilo padrão para o texto de espaço reservado pode ser herdado de diferentes fontes, incluindo o seu tema WordPress, as definições do WPForms (dependendo das suas configurações) ou as definições do navegador do utilizador.

Antes de começar a estilizar os espaços reservados, devemos primeiro criar um formulário que utilize este texto. Assim que tiver criado o seu formulário, terá de adicionar o seu texto de Espaço Reservado para cada campo a partir do separador Avançadas das definições do campo.

Estilização do texto de placeholder

Ao estilizar o texto de espaço reservado, é essencial incluir vários seletores, cada um com o seu próprio prefixo de fornecedor. Isto garante que os estilos são 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 dos navegadores.

Para implementar estes estilos no seu site, basta adicionar o seguinte CSS. Se não tiver a certeza de onde ou como adicionar CSS personalizado, pode consultar o nosso tutorial sobre o assunto.

O CSS fornecido abaixo alterará todo o texto de espaço reservado 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 inferior a todos os espaços reservados dos campos do formulário, tornando-os mais transparentes do que outros navegadores.

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

E é tudo o que precisa para estilizar o texto de espaço reservado. Gostaria de alterar a estilização da mensagem de confirmação usando CSS? No nosso tutorial, Como Remover a Estilização da Caixa de Mensagem de Confirmação, mostraremos como alterar esta estilização.

FAQ

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

R: Se quiser estilizar o campo Lista Suspensa, dê uma vista de olhos a este artigo em vez disso.