O autor selecionou o Fundo de Diversidade em Tecnologia para receber uma doação como parte do programa Write for DOnations.
Introdução
Os formulários da web são um elemento comum no design de sites, variando em complexidade de um campo de formulário de pesquisa a formulários de contato e filtragem de dados complexa. Saber como usar CSS para estilizar e trabalhar com esses elementos ajuda a fornecer melhores soluções para esses problemas cotidianos e pode melhorar a experiência do usuário em seu site.
Este tutorial aborda a criação e estilização de um formulário da web que solicita vários dados do usuário. O formulário usará campos de texto, botões de rádio, caixas de seleção, seleções suspensas, uma área de texto e botões de envio e redefinição. Você irá criar e estilizar este formulário e seus elementos, redefinindo os estilos com a propriedade appearance, configurando seu próprio estilo consistente para o formulário, adicionando respostas de espaço reservado para os campos de texto e personalizando os botões de rádio e caixas de seleção com várias pseudo-classes e pseudo-elementos.
Pré-requisitos
- Experiência utilizando seletores avançados para encontrar e aplicar estilos a elementos HTML com CSS. Para mais informações sobre isso, confira o tutorial Como Selecionar Elementos HTML Usando Seletores de ID, Classe e Atributo em CSS.
- Conhecimento do modelo de caixa CSS, que você pode encontrar no tutorial Como Trabalhar com o Modelo de Caixa em CSS.
- Familiaridade com pseudo-classes em CSS. Confira Como Usar Links e Botões com Pseudo-classes de Estado em CSS para uma introdução.
- Um arquivo HTML vazio salvo em sua máquina local como
index.html, ao qual você pode acessar a partir do seu editor de texto e navegador web de escolha. Para começar, confira nosso tutorial Como Configurar Seu Projeto HTML, e siga Como Usar e Entender Elementos HTML para instruções sobre como visualizar seu HTML no navegador. Se você é novo em HTML, experimente toda a série Como Construir um Site com HTML.
Configurando o HTML Base e CSS
Nesta primeira seção, você configurará o HTML e estilos iniciais com os quais trabalhará ao longo do restante do tutorial. Este HTML irá estabelecer a estrutura básica da página e criar os campos de formulário que você estilizará posteriormente.
Comece abrindo o arquivo index.html no seu editor. Em seguida, adicione o seguinte HTML para fornecer uma estrutura base para o arquivo:
Os elementos contidos no elemento <head> definem o nome da página com o elemento <title> e onde carregar a folha de estilos via o elemento <link>. As tags <meta> definem a codificação de caracteres e instruem o navegador sobre como exibir o site em dispositivos de tela pequena. O conteúdo principal do formulário residirá dentro das tags <body> e <main>.
Em seguida, dentro do elemento <main>, crie um elemento <form>. Dentro do <form>, você adicionará vários elementos de formulário e elementos <div> para auxiliar no layout. Neste tutorial, adições ao código dos passos anteriores estão destacadas. Adicione o HTML destacado do seguinte bloco de código ao seu arquivo index.html:
A estrutura do formulário HTML consiste em valores de atributos interconectados para funcionar corretamente. Este código cria um formulário que pede ao usuário seu nome e email, pergunta qual é o compilador CSS favorito deles e se eles conhecem o CSS grid, fornece um campo para uma mensagem gerada pelo usuário e tem uma caixa de seleção para inscrever o usuário em uma newsletter. Para saber mais sobre como estruturar formulários em HTML, consulte a página Mozilla Web Docs sobre a estrutura de formulários da web.
Asegure-se de salvar suas alterações no arquivo index.html, em seguida, crie um novo arquivo no mesmo diretório chamado styles.css.
Abra o arquivo styles.css no seu editor de texto. Este arquivo fornece os estilos que o navegador aplicará ao conteúdo do index.html. Adicione o seguinte código CSS ao seu arquivo styles.css:
Os seletores de elementos body e main criam algum estilo de texto inicial e layout para a página geral. O seletor de elemento form cria os estilos para o contêiner de formulário geral e depois define uma grade CSS consistindo de duas colunas de tamanho igual com grid-template-columns: 1fr 1fr;. Em seguida, o gap: 2rem fornece um espaçamento de 2rem entre cada linha e coluna na grade. Por fim, o seletor de classe .full-width permite que os contêineres com essa classe se estendam entre as duas colunas em vez de permanecerem em uma única coluna.
Grave suas alterações no styles.css. Em seguida, abra um navegador da sua escolha. Selecione o item de menu Arquivo no navegador e depois selecione a opção Abrir. Em seguida, navegue até a pasta do seu projeto e carregue o arquivo index.html no navegador. A seguinte imagem demonstra como a página será renderizada no navegador:
O formulário é exibido em uma caixa branca sobre um fundo cinza claro. Cada elemento do formulário está disperso pela grade com os quatro primeiros itens alternando entre as duas colunas e os últimos três empilhados, abrangendo as duas colunas. O estilo padrão dos elementos do formulário é como aparecem no Firefox; cada navegador possui um padrão diferente para estilizar os elementos do formulário.
Nesta seção, você configura o HTML e CSS inicial necessário para trabalhar com elementos de formulário. Você também aprendeu que cada navegador manipula o estilo desses elementos de maneira diferente. Na próxima seção, você usará a propriedade appearance para equalizar o estilo dos elementos de formulário em todos os navegadores.
Redefinindo o Estilo do Formulário com a Propriedade appearance
Cada navegador lida com a estilização visual dos elementos de formulário de maneira diferente. Muitas vezes, a estilização desses elementos vai além das capacidades iniciais do CSS e segue a estética do sistema operacional ou a linguagem de design própria do navegador. Para criar uma estilização consistente para todos os navegadores, nesta seção você usará a propriedade appearance e outras propriedades para remover os estilos padrão do navegador.
Para começar, abra o arquivo styles.css no seu editor de texto. Crie um novo seletor de grupo consistindo de button, fieldset, input, legend, select e textarea. Em seguida, dentro do bloco seletor, adicione a propriedade appearance definida como none, como destacado no seguinte bloco de código:
A propriedade appearance é a maneira pretendida de remover a estilização especial dos elementos de formulário. No entanto, devido à idade e implementação desta propriedade, a maioria dos navegadores ainda requer um prefixo de fornecedor adicionado ao nome da propriedade. Um prefixo de fornecedor é uma adição codificada especial adicionada ao nome da propriedade como um identificador para um navegador específico. Para Chrome, Safari e versões recentes de Edge e Opera, esse prefixo é -webkit-. O Firefox usa o prefixo -moz-.
Ao trabalhar com prefixos de fornecedor, é importante colocar as versões com prefixo do atributo primeiro e terminar com a versão sem prefixo. Desta forma, navegadores mais antigos que suportam apenas o atributo com prefixo usarão o prefixo, mas navegadores mais recentes que suportam tanto o prefixo quanto as versões sem prefixo usarão a versão padrão sem prefixo. Adicione os prefixos destacados appearance como formatado no seguinte bloco de código:
Salve suas alterações em styles.css e então abra index.html no seu navegador. As propriedades appearance removeram o estilo adornado e passaram a um estilo mais simples, conforme renderizado na seguinte imagem:
A propriedade appearance permite apenas alterar o estilo específico do navegador. A maior mudança que o valor da propriedade appearance: none fez foi remover completamente os botões de rádio e caixas de seleção. Para o resto dos elementos do formulário, mais algumas propriedades são necessárias para remover completamente os estilos padrão. As propriedades de CSS destacadas no seguinte bloco de código adicionam os estilos necessários para remover os estilos padrão:
Este CSS remove a cor de fundo e redefine os parâmetros do modelo de caixa. Nem todos esses estilos são necessários para todos os elementos, mas é aceitável agrupar esses estilos de redefinição em todos os elementos.
Salve suas alterações em styles.css, em seguida, atualize index.html no navegador. Os elementos do formulário desapareceram visualmente da página, como mostrado na seguinte imagem:
Nesta seção, você utilizou appearance e propriedades adicionais para remover completamente os estilos padrão dos elementos do formulário. Você também utilizou prefixos de fornecedores para aplicar adequadamente a propriedade para futuras versões do navegador. Na próxima seção, você começará a personalizar o estilo visual dos campos do formulário.
Definindo Estilos Coerentes em Todos os Campos do Formulário
Agora que os estilos padrão do navegador foram completamente removidos, você aplicará uma estética personalizada consistente em todos os elementos do formulário. Isso envolverá a criação de vários seletores de grupo que visam características específicas do formulário para receber os estilos apropriados.
Para começar, abra o arquivo styles.css no seu editor de texto. Em seguida, crie um seletor de grupo consistindo de input, select e textarea. Adicione os estilos destacados do bloco de código a seguir:
Esses estilos adicionam uma borda cinza escuro de 2px ao redor de cada um dos elementos de entrada de dados, juntamente com um fundo branco e cantos arredondados.
Em seguida, você aplicará estilos para os elementos de entrada de dados que contêm texto dentro. Você usará um seletor de atributos para especificar quais elementos input devem ser direcionados com base no valor do atributo type. O CSS destacado no bloco de código a seguir fornece os estilos para os elementos necessários:
Esses estilos aplicam um tamanho de fonte e uma família consistentes a todos os elementos. O elemento <textarea>, por exemplo, não herda as configurações de fonte do elemento body. As propriedades display, box-sizing, width e padding fornecem um layout e estrutura consistentes para cada um desses elementos de entrada de dados.
Salve suas alterações em styles.css e depois abra index.html no seu navegador da web. Como renderizado na imagem a seguir, os campos agora têm uma borda cinza escuro mais espessa ao redor deles e o texto do elemento <select> agora está muito maior:
Em seguida, há dois elementos que precisam de algum estilo especial além do estilo amplo que você já escreveu. O primeiro é dar mais altura ao textarea, e o segundo é aplicar uma seta personalizada para o elemento <select>.
Volte para styles.css e adicione um seletor de elemento textarea. Dentro do bloco do seletor, crie uma propriedade min-height definida como um valor de 10rem. Isso criará uma área inicial maior para o usuário do formulário preencher texto. O CSS destacado no seguinte bloco de código ilustra como isso é escrito:
Depois de adicionar os estilos para o textarea, a próxima coisa a ser feita é criar um diretório image. Isso pode ser feito executando o seguinte no prompt de comando a partir do mesmo diretório que seus arquivos index.html e styles.css:
A seguir, execute o seguinte comando curl para baixar a primeira imagem com a qual você irá trabalhar para o novo diretório images:
A imagem que você baixou é um SVG, que é uma linguagem de marcação semelhante ao HTML com o propósito de desenhar formas.
Para adicionar esta nova imagem ao elemento <select>, retorne ao arquivo styles.css. Em seguida, crie um seletor de elemento select e adicione uma propriedade background com o valor destacado no seguinte bloco de código:
Esta propriedade background carrega a imagem como plano de fundo do elemento <select> e não repete a imagem. Em seguida, centraliza a imagem verticalmente com center e a desloca do lado direito com right 0.75rem.
Salve suas alterações no arquivo styles.css, depois retorne ao seu navegador para atualizar a página. O <textarea> agora tem aproximadamente o dobro de sua altura original e o elemento <select> tem uma seta azul apontando para baixo no lado direito. A seguinte imagem ilustra como isso é renderizado no navegador:
Ao longo desta seção, você criou uma estética personalizada para os elementos de entrada de dados do formulário. Você também criou um plano de fundo para o elemento <select> para substituir a seta padrão. Na próxima seção, você irá criar botões de rádio e caixas de seleção personalizadas e aplicar estados selecionados quando estiverem marcados.
Personalizando Botões de Rádio e Caixas de Seleção com a Pseudo Classe :checked
Agora que você criou a estética base do formulário, é hora de aplicar esse estilo visual aos itens interativos de entrada input de um botão de rádio e de uma caixa de seleção.
Comece abrindo o arquivo styles.css no seu editor de texto. Você irá alterar os elementos input com um atributo type de radio ou checkbox para terem um valor de altura e largura iguais. Em seguida, você irá transformar os botões de rádio em círculos. As partes destacadas do seguinte bloco de código mostram como isso é formatado:
A propriedade vertical-align destina-se a alinhar itens de texto em linha. Ao definir isso como middle, os campos de entrada ficarão no meio do alinhamento do texto. Então, a entrada de rádio com uma propriedade border-radius de 50% irá criar um círculo porque a altura e a largura são iguais.
Salve suas alterações no arquivo styles.css e, em seguida, abra o arquivo index.html no seu navegador. Os dois botões de rádio e a caixa de seleção agora estão maiores e mais visíveis, conforme renderizado na seguinte imagem:
Se interagisse com os botões de opção ou caixas de seleção, nada visível aconteceria. A propriedade appearance também remove os indicadores selecionados para esses tipos de entrada. Em seguida, você usará o seletor de pseudo-classe :checked para aplicar estilos ao item de entrada selecionado.
Volte para styles.css e crie um novo seletor para a entrada do botão de opção com uma pseudo-classe :checked. Em seguida, dentro do bloco de seletores, adicione uma background-image com um radial-gradient para que um estilo preenchido possa ser aplicado aos botões de opção selecionados. O CSS destacado no seguinte bloco de código mostra como isso é formatado:
A função calc() permite que a propriedade transparent seja definida 1px após o valor da cor, criando um círculo azul sólido dentro do campo de entrada.
Salve suas alterações em styles.css e volte para index.html no seu navegador. Os botões de opção agora têm um círculo azul sólido rodeado de branco dentro da entrada. A imagem a seguir mostra o botão de opção Sim selecionado:
Em seguida, a caixa de seleção usará uma imagem de plano de fundo para indicar seu estado :checked, semelhante à seta do menu suspenso <select>.
Execute o seguinte comando curl para baixar a imagem de marca de seleção para o seu diretório images:
Agora que você baixou a imagem e está pronta para uso, volte para styles.css no seu editor de texto.
Em seguida, adicione um seletor input[type="checkbox"] com um pseudo-classe :checked anexado. No bloco do seletor, adicione uma propriedade background que carrega a imagem check.svg e a dimensiona para caber na caixa. O CSS destacado no seguinte bloco de código indica como isso é escrito:
A propriedade background garante que a imagem do marcador de seleção esteja centralizada no contêiner, não se repita e seja dimensionada para 75% proporcionalmente.
Salve suas alterações em styles.css e atualize a página no navegador. Ao selecionar a caixa de seleção Receber nossa newsletter, agora um marcador de seleção aparece dentro, conforme ilustrado na seguinte imagem:
Nesta seção, você criou botões de rádio e campos de entrada personalizados e os ajustou para o estado selecionado por meio do uso da pseudo-classe :checked. Na próxima seção, você irá estilizar os elementos <label> e <legend> na página.
Adicionando Estilos Especiais aos Rótulos e Legendas
Os próximos elementos a serem estilizados são os elementos <label> e <legend> no formulário. Serão usados dois estilos diferentes: um estilo de rótulo pequeno para o botão de rádio e caixas de seleção e um estilo de rótulo grande para os demais elementos.
Abra o arquivo index.html no seu editor de texto. Você adicionará um atributo class a cada <label> e <legend> com um valor de large-label ou small-label, conforme destacado no seguinte bloco de código:
...
<form>
<div>
<label for="name" class="large-label">Name</label>
<input id="name" type="text" />
</div>
<div>
<label for="email" class="large-label">Email</label>
<input id="email" type="email" />
</div>
<div>
<label for="comp" class="large-label">Favorite CSS Compiler</label>
...
</div>
<div>
<fieldset>
<legend class="large-label">Are you familiar with CSS Grid?</legend>
<input type="radio" name="grid" id="yes" value="yes" />
<label for="yes" class="small-label">Yes</label>
<input type="radio" name="grid" id="no" value="no" />
<label for="no" class="small-label">No</label>
</fieldset>
</div>
<div class="full-width">
<label for="message" class="large-label">Message</label>
<textarea id="message"></textarea>
</div>
<div class="full-width">
<input type="checkbox" id="newsletter" />
<label for="newsletter" class="small-label">Receive our newsletter?</label>
</div>
...
</form>
...
Salve essas adições no arquivo index.html, e então abra o arquivo styles.css no seu editor de texto.
No arquivo styles.css, adicione um seletor de classe .large-label e adicione as seguintes propriedades conforme destacado no seguinte bloco de código:
Esses estilos definem os elementos large-label para serem grandes e em negrito com um tamanho de fonte de 1.5rem, equivalente a 24px. Em seguida, a propriedade margin-bottom fornece algum espaço entre o rótulo e seus respectivos elementos.
Salve essa alteração no arquivo styles.css e abra o arquivo index.html no seu navegador da web. O texto do rótulo acima do campo de entrada de dados será grande e em negrito, conforme renderizado na seguinte imagem:
Volte para o arquivo styles.css e crie outro seletor de classe para .small-label. Como esses são os rótulos que estão à direita de um botão de rádio ou caixa de seleção, eles precisarão de alguns estilos de espaçamento e tamanho diferentes em comparação com o .large-label. Adicione o CSS destacado ao seu arquivo styles.css a partir do seguinte bloco de código:
O vertical-align: middle irá compensar ligeiramente o texto. A fonte é definida como 1.25rem, equivalente a 20px, com fonte sans-serif. As propriedades margin na esquerda e direita fornecem espaço entre os campos de entrada e o rótulo.
Guarde as suas atualizações no styles.css e atualize o index.html no navegador. Os rótulos ao lado dos botões de rádio e da caixa de seleção agora são maiores e proporcionam mais espaçamento, conforme renderizado na seguinte imagem:
Nesta seção, você criou estilos para dois tipos diferentes de rótulos com base em onde estavam em relação ao seu valor de entrada. Os rótulos agora se destacam, proporcionando uma legibilidade e navegação mais fáceis em todo o formulário. Na próxima seção, você fornecerá exemplos de formatação de dados usando o atributo placeholder.
Fornecendo Conteúdo de Marcador de Posição com o Pseudo-Elemento ::placeholder
O conteúdo de marcador de posição em um elemento input ou textarea fornece aos usuários do formulário uma demonstração visual do tipo de informação solicitada e como formatá-la. O atributo placeholder é adicionado ao HTML com um valor que o descreve. Em seguida, o pseudo-elemento ::placeholder permite personalizar a aparência do texto.
Para começar a criar conteúdo fictício, abra index.html no seu editor de texto. Adicione um atributo placeholder ao texto do nome <input />, ao email <input /> e aos elementos <textarea>. O HTML destacado no bloco de código a seguir indica onde adicionar o placeholder e o valor a ser usado:
Salve as alterações no index.html, depois abra a página em um navegador da web. Essas três áreas de entrada de texto agora têm conteúdo dentro delas. Uma vez que esses campos de entrada de texto são selecionados e o conteúdo é adicionado, o texto do espaço reservado será removido pelo navegador. A seguinte imagem ilustra como os estilos padrão do espaço reservado aparecem no navegador:
Para estilizar o placeholder, abra o styles.css no seu editor de texto. Adicione um seletor de grupo para input::placeholder e textarea::placeholder. Certifique-se de usar dois pontos entre o seletor e o pseudo-elemento, pois é assim que o navegador reconhece a diferença entre uma pseudo-classe e um pseudo-elemento. O CSS destacado no bloco de código a seguir mostra como isso é escrito:
A única coisa a observar é que o Firefox requer um valor de opacity definido como 1 para ter o valor de cor completo. Caso contrário, o Firefox reduz a opacity, diminuindo a cor do texto e causando problemas de contraste de cor acessível dependendo do valor da cor. Como esta é uma situação exclusiva do Firefox, um comentário está lá para explicar o propósito da presença da propriedade opacity.
Grave as suas alterações no styles.css e retorne ao navegador para atualizar o index.html. O texto de espaço reservado agora tem a mesma cor azul usada para a seta suspensa e para os estados selecionados do botão de rádio e da caixa de seleção. A seguinte imagem ilustra como o navegador renderiza o conteúdo do placeholder:
Com esta seção, você criou conteúdo de placeholder nos campos de entrada de texto e os estilizou com o uso do pseudo-elemento ::placeholder. Na próxima seção, você criará estilos personalizados para os elementos de formulário <button>.
Criando Estilos de Botões Interativos
Nos formulários da web, os elementos <button> são frequentemente usados para enviar ou redefinir um formulário. No index.html, existem dois botões, um com um type de submit e o outro de reset. Ambos são funcionalmente úteis, mas executam ações opostas. O botão submit enviará o formulário para um processador, enquanto o botão reset limpa todos os dados inseridos no formulário. Devido a essas ações diferentes, os elementos <button> precisam parecer visualmente diferentes também.
Para começar, abra o styles.css no seu editor de texto e crie um seletor de elemento button. Neste bloco de seletor, você adicionará os estilos que são compartilhados entre os elementos submit e reset <button>, como destacado no seguinte bloco de código:
O font define ambos os botões para terem o mesmo estilo e tamanho de fonte. Em seguida, o border-radius adiciona um canto arredondado a ambos os botões. A propriedade cursor altera o estilo do cursor para ser o ponteiro de estilo mão. Por último, a propriedade padding define o espaço ao redor do interior do botão.
Salve suas alterações no styles.css e depois abra o index.html no seu navegador da web. O texto no botão irá aumentar e o espaçamento entre o texto irá aumentar visualmente devido ao padding. A seguinte imagem mostra como os botões são renderizados no navegador:
Em seguida, retorne ao styles.css para adicionar estilos para cada tipo de botão usando um seletor de atributo direcionando cada um. Para o botão submit, adicione um background-color azul e cor de texto branco. O botão reset ganhará um sublinhado semelhante a um link e uma margin para adicionar mais espaço entre os botões. Adicione o CSS destacado no seguinte bloco de código ao seu arquivo styles.css:
Salve estas adições no styles.css e depois atualize o index.html no seu editor de texto. O botão submit agora é azul e branco proeminente, enquanto o reset é texto sublinhado subjugado, como renderizado na seguinte imagem:
O elemento <button> não possui um estado :hover por padrão, então agora você irá adicionar isso ao seu estilo. Um estado :hover é útil para ajudar usuários de cursor a terem feedback visual de que o cursor está posicionado nos botões.
Para criar estados :hover para esses elementos <button>, volte para o arquivo styles.css no seu editor de texto. Defina a cor de fundo do botão submit para escurecer ao passar o mouse sobre ele. Em seguida, faça com que o botão reset remova o sublinhado ao passar o mouse sobre ele. O HTML destacado no seguinte bloco de código indica como escrever esses estilos:
Salve suas alterações no arquivo styles.css e depois retorne ao navegador para atualizar index.html. Como a seguinte animação retrata, os elementos <button> alteram seus estilos quando o cursor do mouse passa sobre eles:
Nesta seção, você criou estilos para os elementos <button> para tornar suas diferenças visualmente perceptíveis. Você alterou como o cursor aparece ao passar o mouse ajustando a propriedade cursor. Você também criou estilos personalizados para aplicar a cada botão para fornecer feedback visual adicional. Na última seção, você fornecerá mais feedback visual de atividade criando estilos quando um elemento de formulário estiver em uso com a pseudo-classe :focus.
Esclarecendo os Campos de Formulário Ativos Com :focus
Ao preencher um formulário, é importante que o usuário saiba em qual campo está trabalhando atualmente. Isso pode ser alcançado com o uso da pseudo-classe :focus. Por padrão, os navegadores utilizam a propriedade outline para indicar quando um elemento está com :focus, mas às vezes pode não ser um indicador perceptível, ou pode entrar em conflito com outros aspectos visuais do design. Nesta seção, você irá criar um estado personalizado de :focus que combine com o visual do seu formulário.
Para começar a trabalhar com os estados de :focus dos campos de formulário, abra o arquivo styles.css no seu editor de texto. Crie um seletor de grupo para input, select e textarea, todos com a pseudo-classe :focus, conforme destacado no seguinte bloco de código:
Esses estilos removem o valor padrão de outline do navegador e substituem o estilo por um traço azul espesso criado com a propriedade box-shadow. Os três primeiros valores do box-shadow são para o posicionamento e quantidade de desfoque da sombra. O quarto é chamado de spread, que neste caso cria um traço de 4px ao redor do elemento focado.
Em seguida, os botões receberão um estado de foco ligeiramente diferente, já que o botão submit é da mesma cor azul. O propósito e a intenção de um estado de foco é chamar atenção perceptível para o elemento focado, então você distinguirá esses contornos de maneiras diferentes.
Adicione um seletor button:focus ao arquivo styles.css. No bloco do seletor, desative o padrão outline e adicione uma propriedade box-shadow. Os valores de posicionamento, desfoque e expansão permanecerão os mesmos dos campos de entrada, mas a cor será preta em vez de azul, como destacado no seguinte bloco de código:
Salve suas alterações no arquivo styles.css e retorne ao navegador. Atualize index.html e comece a pressionar a tecla Tab para mudar o foco entre cada elemento no formulário. A seguinte animação mostra como o estilo de foco é aplicado conforme o foco muda com a tecla Tab:
Nesta seção, você criou estilos de estado de foco que fornecem feedback visual claro quando um elemento do formulário está com foco. Essa estilização visual é útil para usuários de mouse, toque e teclado.
Conclusão
Formulários são um elemento comum do design web. Eles permitem que os usuários interajam com aplicativos, pesquisem conteúdo e forneçam feedback. Neste tutorial, você criou e estilizou um formulário completo. Você removeu os estilos padrão do navegador com a propriedade appearance e criou uma nova estética personalizada em vários elementos. Você utilizou a pseudo-classe :checked para criar estados selecionados para botões de rádio e caixas de seleção. Em seguida, adicionou conteúdo de placeholder e combinou o estilo com o pseudo-elemento ::placeholder. Depois de criar estilos personalizados para botões, aplicou estilos de :focus dando feedback visual valioso aos usuários do formulário.
Se você gostaria de ler mais tutoriais de CSS, experimente os outros tutoriais na série Como Estilizar HTML com CSS.
Source:
https://www.digitalocean.com/community/tutorials/how-to-style-common-form-elements-with-css