### [Como Adicionar CSS ao Foco do Campo do Formulário](https://wpforms.com/developers/how-to-add-css-to-the-form-field-focus/)
**Publicado:** 23 de outubro de 2020
**Autor:** Umair Majeed
**Resumo:** Este artigo mostrar-lhe-á como usar CSS para adicionar foco ao campo do formulário quando os utilizadores navegam pelos seus campos.
**Conteúdo:**
Gostaria de melhorar a aparência dos seus campos de formulário quando os utilizadores interagem com eles? Quando um utilizador clica num campo de formulário, ele entra no que é chamado de “estado de foco” em CSS.
Este guia mostrar-lhe-á como adicionar efeitos visuais atraentes que fazem com que os seus campos de formulário se destaquem ligeiramente da página quando os utilizadores interagem com eles.
## Compreender o Foco do Campo do Formulário
Por defeito, o WPForms adiciona uma borda simples em volta dos campos quando estes estão em foco (quando um utilizador clica ou navega até eles). Podemos melhorar este comportamento padrão com CSS personalizado para criar um feedback visual mais envolvente.
## Configurar o Seu Formulário
Primeiro, crie o seu formulário e adicione os campos desejados. Se precisar de ajuda para criar um formulário, consulte o nosso [guia sobre como criar o seu primeiro formulário](https://wpforms.com/docs/creating-first-form/).
## Adicionar CSS para Efeitos de Foco Personalizados
Para adicionar efeitos de foco personalizados, terá de adicionar CSS ao seu site. Se não tiver a certeza de como adicionar CSS personalizado, consulte o nosso [guia sobre como adicionar estilos CSS personalizados ao seu site](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/).
Aqui está o código CSS para criar um efeito de foco apelativo:
O que este CSS faz:
- Adiciona um efeito subtil de sombra quando os campos estão em foco
- Cria uma animação de transição suave
- Melhora o botão de envio com efeitos de passagem do rato
## Personalizar o Código
Terá de atualizar o seletor CSS para corresponder ao ID do seu formulário. Substitua **form#wpforms-form-1000** pelo ID real do seu formulário. Se precisar de ajuda para encontrar o ID do seu formulário, consulte o nosso [guia sobre como encontrar IDs de formulário e campo](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/).
### Opções de Personalização
Pode modificar vários aspetos do efeito de foco:
#### Intensidade da Sombra
Ajuste a sombra alterando os valores em box-shadow:
```
box-shadow: 5px 5px 10px #ccc; /* horizontal, vertical, blur, cor */
```
#### Velocidade da Animação
Altere o tempo da transição:
```
transition: box-shadow 0.3s ease-in-out; /* propriedade, duração, função de temporização */
```
#### Cores e Estilos
Personalize as cores e as bordas:
```
button[type=submit]:hover {
background-color: #eee; /* Alterar cor de fundo ao passar o rato */
border: 1px solid #ccc; /* Alterar estilo da borda */
}
```
## Perguntas Frequentes
#### P: Como posso adicionar autofocus ao meu formulário?
**R:** Se desejar que o seu formulário foque automaticamente no primeiro campo quando a página carrega, consulte o nosso [guia sobre como adicionar autofocus aos seus formulários](https://wpforms.com/developers/how-to-add-autofocus-on-your-form/).
E é tudo! Adicionou com sucesso o CSS necessário para alterar o foco do campo do formulário. Se desejar experimentar outros tutoriais de CSS sobre como alterar a aparência dos seus campos de formulário, consulte o nosso artigo sobre [adicionar design material aos seus formulários](https://wpforms.com/developers/how-to-add-material-design-to-your-form-fields-using-css/).
**Categorias:** Estilização
**Tags:** CSS
---