### [Como Personalizar o Placeholder do Authorize.net](https://wpforms.com/developers/how-to-customize-the-authorize-net-placeholder/)
**Publicado:** 7 de julho de 2021
**Autor:** Equipa Editorial
**Resumo:** Este tutorial mostrar-lhe-á como usar CSS para estilizar o seu placeholder do Authorize.net.
**Conteúdo:**
## Introdução
Gostaria de personalizar o placeholder do Authorize.net que vê no campo **Número do Cartão de Crédito**? Usando CSS, pode facilmente estilizar não só o campo do número, mas também o campo **Código de Segurança**. Neste tutorial, mostraremos o CSS necessário para estilizar estes dois campos.
Por defeito, o campo onde insere o seu cartão de crédito é estilizado com algumas definições padrão.
## Criação do formulário
Primeiro, começaremos por criar um formulário de doação simples e adicionar o campo de Cartão de Crédito Authorize.net. Se precisar de alguma ajuda sobre como criar este tipo de formulário, [consulte esta documentação](https://wpforms.com/docs/how-to-install-and-use-the-authorize-net-addon-with-wpforms/ "Como Instalar e Usar o Addon Authorize.Net com WPForms").
Depois de adicionar o campo de formulário Authorize.net, navegue para **Opções do Campo** e clique no separador **Avançadas**. A partir daí, pode adicionar o seu texto de **Placeholder**.
## Adicionar o CSS
Agora é hora de adicionar o CSS ao seu site.
Se precisar de ajuda para adicionar CSS ao seu site, [consulte este tutorial](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Como Adicionar Estilos CSS Personalizados para WPForms").
```
input.wpforms-field-authorize_net-cardnumber::-webkit-input-placeholder,
input.wpforms-field-authorize_net-cardcvc::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #333333;
font-weight: 500;
font-family: "Roboto";
font-size: 18px;
background-color: #f6f6f6;
}
input.wpforms-field-authorize_net-cardnumber::-webkit-input-placeholder,
input.wpforms-field-authorize_net-cardcvc::-webkit-input-placeholder {
/* Firefox 19+ */
color: #333333;
font-weight: 500;
font-family: "Roboto";
font-size: 18px;
background-color: #f6f6f6;
}
input.wpforms-field-authorize_net-cardnumber::-webkit-input-placeholder,
input.wpforms-field-authorize_net-cardcvc::-webkit-input-placeholder {
/* IE 10+ */
color: #333333;
font-weight: 500;
font-family: "Roboto";
font-size: 18px;
background-color: #f6f6f6;
}
input.wpforms-field-authorize_net-cardnumber::-webkit-input-placeholder,
input.wpforms-field-authorize_net-cardcvc::-webkit-input-placeholder {
/* Firefox 18- */
color: #333333;
font-weight: 500;
font-family: "Roboto";
font-size: 18px;
background-color: #f6f6f6;
}
```
O nome da classe CSS **input.wpforms-field-authorize\_net-cardnumber** irá estilizar apenas o campo **Número do Cartão**, enquanto o nome da classe **input.wpforms-field-authorize\_net-cardcvc** irá estilizar apenas o campo **Código de Segurança**.
O CSS acima irá estilizar todos os campos de número de cartão e código de segurança para Authorize.net em todos os formulários.
E é tudo o que precisa para personalizar os campos de placeholder do Authorize.net. Gostaria também de enviar um número de fatura? Dê uma vista de olhos a este artigo sobre [Como Enviar um Número de Fatura para Pagamentos Authorize.net](https://wpforms.com/developers/how-to-send-an-invoice-number-through-to-authorize-net-payments/ "Como Enviar um Número de Fatura para Pagamentos Authorize.net").
**Categorias:** Tutoriais
**Etiquetas:** CSS
---