### [Como Estilizar o Texto de Placeholder para Campos de Formulário](https://wpforms.com/developers/style-placeholder-text-for-form-fields/)
**Publicado:** 14 de outubro de 2019
**Autor:** Equipa Editorial
**Resumo:** Este trecho de CSS irá ajudá-lo a estilizar o texto de placeholder para corresponder à sua marca personalizada no seu site.
**Conteúdo:**
Está interessado em personalizar a aparência do texto de placeholder nos campos do seu formulário WPForms? Com algumas linhas de CSS personalizado, pode alcançá-lo facilmente. O texto de placeholder serve como informação temporária dentro de um campo e desaparece quando um utilizador interage com o campo. No artigo seguinte, guiá-lo-emos através do processo de estilização do texto de placeholder para os seus campos de formulário.
Tenha em atenção que a estilização padrão para o texto de placeholder pode ser herdada de diferentes fontes, incluindo o seu tema WordPress, as definições do WPForms (dependendo das suas definições) ou as definições do navegador do utilizador.
Antes de começar a estilizar os placeholders, 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 **Placeholder** para cada campo na aba **Avançadas** das definições do campo.
Se precisar de ajuda para adicionar texto de placeholder, [por favor, reveja esta documentação](https://wpforms.com/docs/how-to-add-placeholder-text-to-a-form-field/ "How to Add Placeholder Text to a Form Field").
## Estilizando o texto de placeholder
Ao estilizar o texto de placeholder, é 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, a inclusão de 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 irá alterar 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](https://www.w3schools.com/cssref/css3_pr_opacity.asp "CSS opacity Property") inferior a todos os placeholders dos campos de formulário, tornando-os mais transparentes do que outros navegadores.
Isso já está abordado no CSS acima, definindo a opacidade para CSS específico do Firefox como **opacity: 1;**
E é tudo o que precisa para estilizar o texto de placeholder. 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](https://wpforms.com/developers/how-to-remove-confirmation-message-box-styling/ "How to Remove Confirmation Message Box Styling"), mostraremos como alterar esta estilização.
## FAQ
#### P: Posso usar este CSS para estilizar um campo de dropdown?
**R:** Se desejar estilizar o campo **Dropdown**, [por favor, veja este artigo em vez disso](https://wpforms.com/developers/how-to-style-the-dropdown-field/ "How to Style the Dropdown Field").
**Categorias:** Estilização
**Tags:** CSS, Texto de Placeholder
---