### [Como Personalizar a Aparência dos Ícones de Classificação](https://wpforms.com/developers/how-to-customize-the-look-of-the-rating-icons/)
**Publicado:** 14 de novembro de 2019
**Autor:** Umair Majeed
**Resumo:** Neste artigo, usaremos CSS para personalizar a aparência dos ícones de classificação.
**Conteúdo:**
Gostaria de melhorar a aparência dos ícones do seu campo de Classificação no WPForms? Embora o construtor de formulários ofereça opções básicas de cores e ícones, você pode obter estilos mais sofisticados usando CSS.
Este guia mostrará como personalizar seus ícones de classificação para um visual único que corresponda à sua marca.
## Configurando o Seu Formulário
Primeiro, crie seu formulário e adicione um campo de **Classificação**. Você pode começar selecionando seus ícones e cores preferidos através do construtor de formulários. Se precisar de ajuda para criar seu formulário, consulte nosso guia sobre [como criar seu primeiro formulário](https://wpforms.com/docs/how-to-add-a-rating-field-to-wpforms/).
Para detalhes sobre como usar o campo de Classificação, confira nosso [guia completo sobre o campo de Classificação](https://wpforms.com/docs/how-to-add-a-rating-field-to-wpforms/).
## Adicionando Estilos de Ícones Personalizados
Para personalizar seus ícones de classificação, adicione este CSS ao seu site. Se não tiver certeza de como adicionar CSS personalizado, consulte nosso guia sobre [como adicionar estilos CSS personalizados ao seu site](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/).
Certifique-se de substituir form#wpforms-form-**1000** pelo ID real do seu formulário. Se precisar de ajuda para encontrar o ID do seu formulário, consulte nosso guia sobre [como encontrar IDs de formulário e campo](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/).
## Usando Imagens Personalizadas como Ícones de Classificação
Se preferir usar suas próprias imagens em vez dos ícones padrão, você pode usar este CSS alternativo:
```
/* Estilizar ícones de classificação de imagem personalizada */
form#wpforms-form-1000 .wpforms-field-rating-item {
padding-right: 6px;
background-image: url(https://yoursite.com/wp-content/uploads/2022/03/crown-3.jpg);
height: 50px;
width: 50px;
background-repeat: no-repeat;
background-size: 50%;
}
/* Estilizar estados de hover e selecionado */
form#wpforms-form-1000 .wpforms-field-rating-item:hover,
form#wpforms-form-1000 .wpforms-field-rating-item.selected {
background-size: 70%;
}
/* Ocultar ícones SVG padrão */
form#wpforms-form-1000 .wpforms-field-rating svg {
display: none;
}
```
Lembre-se de atualizar o URL da imagem para apontar para sua imagem personalizada. O exemplo assume um tamanho de imagem de 150px por 150px.
## Perguntas Frequentes
#### P: Estes estilos funcionarão com Formulários Conversacionais?
**R:** Sim! Este CSS personalizará a aparência dos ícones de classificação ao usar o add-on **Formulários Conversacionais**, o add-on **Páginas de Formulários**, bem como um embed padrão do formulário em qualquer post, página ou widget.
E é tudo o que você precisa para personalizar a aparência dos ícones do campo de formulário de **Classificação** no WPForms! Em seguida, você gostaria de personalizar também a aparência do tema captcha para reCAPTCHA? Para fazer isso, dê uma olhada em nosso tutorial sobre [como alterar o tema do captcha no Google reCAPTCHA.](https://wpforms.com/developers/how-to-change-the-captcha-theme-on-google-checkbox-v2-recaptcha/ "Como Alterar o Tema do Captcha no Google Checkbox v2 reCAPTCHA")
**Categorias:** Estilização
**Tags:** CSS
---