Como Estilizar Elementos de Formulário Comuns com CSS

Tutoriais

O autor selecionou o Fundo de Diversidade em Tecnologia para receber uma doação como parte do programa Escreva para Doações.

Introdução

Formulários da web são um elemento comum do design de sites, variando em complexidade de um campo de formulário de pesquisa a formulários de contato e filtragem de dados complexos. 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 utilizará campos de texto, botões de rádio, caixas de seleção, seleções de lista suspensa, uma área de texto e botões de envio e redefinição. Você 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

Configurando o HTML e CSS Básicos

Nesta primeira seção, você irá configurar o HTML e estilos iniciais com os quais trabalhará ao longo do restante do tutorial. Este HTML irá criar 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:

index.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS Form</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main>
    </main>
  </body>
</html>

Os elementos contidos no elemento <head> definem o nome da página com o elemento <title> e onde carregar a folha de estilos por meio do 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ê irá adicionar vários elementos de formulário e elementos <div> para ajudar com o layout. Neste tutorial, as adições ao código dos passos anteriores estão destacadas. Adicione o HTML destacado do bloco de código a seguir ao seu arquivo index.html:

index.html
...
<main>
  <form>
    <div>
      <label for="name">Name</label>
      <input id="name" type="text" />
    </div>
    <div>
      <label for="email">Email</label>
      <input id="email" type="email" />
    </div>
    <div>
      <label for="comp">Favorite CSS Compiler</label>
      <select id="comp">
        <option value="sass">Sass</option>
        <option value="less">Less</option>
        <option value="stylus">Stylus</option>
        <option value="postcss">PostCSS</option>
        <option value="other">Other</option>
      </select>
    </div>
    <div>
      <fieldset>
        <legend>Are you familiar with CSS Grid?</legend>
        <input type="radio" name="grid" id="yes" value="yes" />
        <label for="yes">Yes</label>
        <input type="radio" name="grid" id="no" value="no" />
        <label for="no">No</label>
      </fieldset>
    </div>
    <div class="full-width">
      <label for="message">Message</label>
      <textarea id="message"></textarea>
    </div>
    <div class="full-width">
      <input type="checkbox" id="newsletter" />
      <label for="newsletter">Receive our newsletter?</label>
    </div>
    <div class="full-width">
      <button type="submit">Send Response</button>
      <button type="reset">Clear Form</button>
    </div>
  </form>
</main>
...

A estrutura do formulário HTML consiste em valores de atributo interconectados para funcionar corretamente. Este código cria um formulário que pede ao usuário seu nome e email, pergunta sobre seu compilador CSS favorito 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 Documentação da Web da Mozilla sobre a estrutura de formulários da web.

Certifique-se de salvar suas alterações no arquivo index.html, e depois 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 de index.html. Adicione o seguinte código CSS ao seu arquivo styles.css:

styles.css
body {
  margin: 0;
  background-color: hsl(0, 0%, 98%);
  color: #333;
  font: 100% / normal sans-serif;
}

main {
  margin: 0 auto;
  padding: 4rem 0;
  width: 90%;
  max-width: 60rem;
}

form {
  box-sizing: border-box;
  padding: 2rem;
  border-radius: 1rem;
  background-color: hsl(0, 0%, 100%);
  border: 4px solid hsl(0, 0%, 90%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.full-width {
  grid-column: span 2;
}

Os seletores de elementos body e main criam algum estilo inicial de texto e layout para a página como um todo. O seletor de elemento form cria os estilos para o contêiner geral do formulário e, em seguida, define um CSS Grid 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 último, o seletor de classe .full-width permite que os contêineres com esta classe se estendam entre as duas colunas em vez de permanecerem em uma coluna.

Salve as suas alterações no arquivo 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 em 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 três últimos empilhados, abrangendo as duas colunas. A estilização padrão dos elementos do formulário é como aparecem no Firefox; cada navegador tem um padrão diferente para a estilização dos elementos do formulário.

Nesta seção, você configura o HTML e o CSS inicial necessários para trabalhar com os elementos do formulário. Você também aprendeu que cada navegador manipula a estilização desses elementos de forma diferente. Na próxima seção, você usará a propriedade appearance para equalizar a estilização dos elementos do formulário em todos os navegadores.

Redefinindo a Estilização do Formulário com a Propriedade appearance

Cada navegador lida com o estilo visual dos elementos de formulário de maneira diferente. Muitas vezes, o estilo desses elementos vai além das capacidades iniciais do CSS e segue a estética do sistema operacional ou a própria linguagem de design do navegador. Para criar um estilo 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 do seletor, adicione a propriedade appearance definida como none, conforme destacado no seguinte bloco de código:

styles.css
...
button,
fieldset,
input,
legend,
select,
textarea {
  appearance: none;
}

A propriedade appearance é a maneira pretendida de remover o estilo especial dos elementos de formulário. No entanto, devido à idade e implementação dessa 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 predefinida ao nome da propriedade como um identificador para um navegador específico. Para Chrome, Safari e versões recentes do Edge e Opera, esse prefixo é -webkit-. O Firefox usa o prefixo -moz-.

Ao trabalhar com prefixos de fornecedores, é importante colocar as versões com prefixo do atributo primeiro e terminar com a versão sem prefixo. Dessa forma, navegadores mais antigos que suportam apenas o atributo prefixado 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 conforme formatado no seguinte bloco de código:

styles.css
legend,
fieldset,
select,
textarea,
input,
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

Salve suas alterações em styles.css e depois abra index.html no seu navegador. As propriedades appearance removeram o estilo decorativo e passaram a ter um estilo mais simples, conforme mostrado na seguinte imagem:

A propriedade appearance permite apenas alterar o estilo específico do navegador. A maior mudança feita pelo valor da propriedade appearance: none foi remover completamente os botões de rádio e caixas de seleção. Para o restante dos elementos do formulário, são necessárias mais algumas propriedades para remover completamente os estilos padrão. As propriedades CSS destacadas no seguinte bloco de código adicionam os estilos necessários para remover os estilos padrão:

styles.css
...
button,
fieldset,
input,
legend,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

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 a propriedade de forma apropriada 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 styles.css no seu editor de texto. Em seguida, crie um seletor de grupo consistindo de input, select e textarea. Adicione os estilos destacados no seguinte bloco de código:

styles.css
...
legend,
fieldset,
select,
textarea,
input,
button {
  ...
}

input,
select,
textarea {
  border: 2px solid #333;
  background-color: white;
  border-radius: 0.25rem;
}

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 atributo para especificar quais elementos input serão 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:

styles.css
...
input,
textarea,
select {
  ...
}

input[type="text"],
input[type="email"],
select,
textarea {
  font: 1.25rem / 1.5 sans-serif;
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 0.5rem 0.75rem;
}

Esses estilos aplicam um tamanho e família de fonte consistentes em 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 no arquivo styles.css e depois abra o arquivo index.html em seu navegador da web. Como renderizado na imagem a seguir, os campos agora têm uma borda cinza escura mais espessa ao redor deles e o texto do elemento <select> agora é muito maior:

Em seguida, existem 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 de seleção personalizada ao elemento <select>.

Volte para o arquivo 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:

styles.css
...
input[type="text"],
input[type="email"],
select,
textarea {
  ...
}

textarea {
  min-height: 10rem;
}

Depois de adicionar os estilos para o textarea, a próxima coisa a ser feita é criar um diretório de imagem. Isso pode ser feito executando o seguinte em seu prompt de comando a partir do mesmo diretório que seus arquivos index.html e styles.css:

  1. mkdir images

Em seguida, execute o seguinte comando curl para baixar a primeira imagem com a qual você trabalhará no novo diretório images:

  1. curl -sL https://assets.digitalocean.com/articles/68129/down-arrow.svg -o images/down-arrow.svg

A imagem que você baixou é um SVG, que é uma linguagem de marcação semelhante ao HTML com o objetivo de desenhar formas.

Para adicionar esta nova imagem ao elemento <select>, volte para o arquivo styles.css. Em seguida, crie um seletor de elemento select e adicione uma propriedade background com o valor destacado no bloco de código a seguir:

styles.css
...
textarea {
  min-height: 10rem;
}

select {
  background: url("images/down-arrow.svg") no-repeat center right 0.75rem;
}

Esta propriedade background carrega a imagem para o fundo do elemento <select> e não repete a imagem. Em seguida, centraliza a imagem verticalmente com center e a desloca da lateral direita com right 0.75rem.

Salve suas alterações no arquivo styles.css, em seguida, 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 voltada 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ê criará botões de rádio e caixas de seleção personalizadas e aplicará estados selecionados quando estiverem marcados.

Personalizando Botões de Opção 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 de um botão de opção e uma caixa de seleção.

Comece abrindo o arquivo styles.css no seu editor de texto. Você vai alterar os elementos input com um atributo type de radio ou checkbox para ter um valor de altura e largura iguais. Então você vai transformar os botões de opção em círculos. As porções destacadas do bloco de código a seguir mostram como isso é formatado:

styles.css
...
select {
  ...
}

input[type="radio"],
input[type="checkbox"] {
  height: 1.5em;
  width: 1.5em;
  vertical-align: middle;
}

input[type="radio"] {
  border-radius: 50%;
}

A propriedade vertical-align é destinada para alinhar itens de texto em linha. Ao definir isso como middle, os campos de entrada irão ficar no meio do alinhamento do texto. Em seguida, o botão de opção 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 depois abra o index.html no seu navegador. Os dois botões de opção e a caixa de seleção agora estão maiores e mais visíveis, conforme mostrado na seguinte imagem:

Se você interagir com os botões de rádio ou caixas de seleção, nada visível acontecerá. 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 o botão de rádio com uma pseudo-classe :checked. Em seguida, dentro do bloco do seletor, adicione um background-image com um radial-gradient para que um estilo preenchido possa ser aplicado aos botões de rádio selecionados. O CSS destacado do bloco de código a seguir mostra como isso é formatado:

styles.css
...
input[type="radio"] {
  border-radius: 50%;
}

input[type="radio"]:checked {
  background-image: radial-gradient(
    hsl(213, 73%, 50%) 40%,
    transparent calc(40% + 1px)
  );
}

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 em seu navegador. Os botões de rádio agora têm um círculo azul sólido cercado por branco dentro da entrada. A imagem a seguir mostra o botão de rádio Sim selecionado:

Em seguida, a caixa de seleção usará uma imagem 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 seu diretório imagens:

  1. curl -sL https://assets.digitalocean.com/articles/68129/check.svg -o images/check.svg

Agora que você baixou a imagem e está pronto para usar, volte para styles.css em 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:

stlyes.css
...
input[type="radio"]:checked {
  ...
}

input[type="checkbox"]:checked {
  background: url('images/check.svg') no-repeat center / 75% auto;
}

A propriedade background garante que a imagem da marca de seleção esteja centralizada no contêiner, não se repita e seja dimensionada em 75% proporcionalmente.

Salve suas alterações em styles.css e atualize a página no navegador. Ao selecionar a caixa de seleção Receber nosso boletim informativo, agora aparece uma marca de seleção dentro, como ilustrado na seguinte imagem:

Nesta seção, você criou botões de rádio personalizados e campos de entrada 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 a 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 os botões de rádio e caixas de seleção e um estilo de rótulo grande para os demais elementos.

Abra o 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 bloco de código a seguir:

index.html
...
<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 estas adições no index.html, então abra o styles.css no seu editor de texto.

No styles.css, adicione um seletor de classe .large-label e adicione as seguintes propriedades conforme destacado no bloco de código a seguir:

styles.css
...
.full-width {
  grid-column: span 2;
}

.large-label {
  display: inline-block;
  font: bold 1.5rem sans-serif;
  margin-bottom: 0.5rem;
}
...

Esses estilos definem os elementos large-label como grandes e em negrito, com um tamanho de fonte de 1.5rem, equivalente a 24px. Então, a propriedade margin-bottom fornece algum espaço entre o rótulo e seus equivalentes.

Salve esta alteração no styles.css e abra o 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 ao styles.css e crie outro seletor de classe para .small-label. Como estes 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 estilos de espaçamento e dimensionamento diferentes em comparação com o .large-label. Adicione o CSS destacado ao seu styles.css no seguinte bloco de código:

styles.css
...
.large-label {
  display: inline-block;
  font: bold 1.5rem sans-serif;
  margin-bottom: 0.5rem;
}

.small-label {
  vertical-align: middle;
  display: inline-block;
  margin-left: 0.25rem;
  margin-right: 1.5rem;
  font: 1.25rem sans-serif;
}
...

O vertical-align: middle vai deslocar ligeiramente o texto. A fonte é definida como 1.25rem, equivalente a 20px, com fonte sans-serif. As propriedades de margin à esquerda e à direita fornecem espaço entre os campos de entrada e o rótulo.

Salve suas atualizações em styles.css e atualize 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 fornecem mais espaçamento, conforme renderizado na seguinte imagem:

Nesta seção, você criou estilos para dois tipos diferentes de rótulos com base em sua relação com o 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 do 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 descritivo. Em seguida, o pseudo-elemento ::placeholder permite personalizar a aparência do texto.

Para começar a criar conteúdo de espaço reservado, abra index.html no seu editor de texto. Adicione um atributo placeholder para o texto do nome <input />, o email <input />, e os elementos <textarea>. O HTML destacado no bloco de código a seguir indica onde adicionar o placeholder e o valor a ser usado:

index.html
...
<form>
  <div>
    <label for="name" class="large-label">Name</label>
    <input id="name" type="text" placeholder="First or Full Name" />
  </div>
  <div>
    <label for="email" class="large-label">Email</label>
    <input id="email" type="email" placeholder="[email protected]" />
  </div>
  ...
  <div class="full-width">
    <label for="message" class="large-label">Message</label>
    <textarea id="message" placeholder="Leave a message…"></textarea>
  </div>
  ...
</form>
...

Salve suas alterações no index.html, então 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 conteúdo é adicionado, o texto de 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:

styles.css
...
textarea {
  min-height: 10rem;
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* Firefox */
  color: hsl(213, 73%, 50%);
}

select {
  background: url("images/down-arrow.svg") no-repeat center right 0.75rem;
}
...

A única coisa a ser observada é 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 apenas do Firefox, há um comentário explicando o propósito da presença da propriedade opacity.

Salve suas alterações no styles.css e retorne ao navegador para atualizar index.html. O texto do espaço reservado agora está na mesma cor azul usada para a seta de menu suspenso e estados selecionados para o botão de rádio e 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 em 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 elementos de formulário <button>.

Criando Estilos de Botão Interativos

Em 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 realizam 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 diferentes ações, 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. Nesse bloco de seletor, você irá adicionar os estilos que são compartilhados entre os elementos submit e reset <button>, conforme destacado no seguinte bloco de código:

styles.css
...
input[type="checkbox"]:checked {
  background: url("images/check.svg") no-repeat center / 75% auto;
}

button {
  font: 1.25rem sans-serif;
  border-radius: 0.25rem;
  cursor: pointer;
  padding: 0.75rem 1.25rem;
}

O font define que ambos os botões tenham 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 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 então abra o index.html no seu navegador da web. O texto no botão irá crescer e o espaçamento entre o texto 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 type 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 branca. 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:

styles.css
...
button {
  ...
}

button[type="submit"] {
  background-color: hsl(213, 73%, 50%);
  color: white;
}

button[type="reset"] {
  text-decoration: underline;
  margin-left: 1rem;
}

Salve essas adições no styles.css e então atualize o index.html no seu editor de texto. O botão submit agora é azul e branco proeminente, enquanto o reset é texto sublinhado discreto, conforme 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 os usuários de cursor a terem feedback visual de que o cursor está sobre os botões.

Para criar estados :hover para esses elementos <button>, volte para o arquivo styles.css no seu editor de texto. Defina o background-color do botão submit para escurecer quando hover. Em seguida, faça com que o botão reset remova o sublinhado quando hover. O HTML destacado no seguinte bloco de código indica como escrever esses estilos:

styles.css
...
button[type="submit"] {
  background-color: hsl(213, 73%, 50%);
  color: white;
}

button[type="submit"]:hover {
  background-color: hsl(213, 73%, 40%);
}

button[type="reset"] {
  text-decoration: underline;
  margin-left: 1rem;
}

button[type="reset"]:hover {
  text-decoration: none;
}

Salve suas alterações no arquivo styles.css e então retorne para o navegador para atualizar o index.html. Como a seguinte animação retrata, os elementos <button> mudam seus estilos quando o cursor do mouse está 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 mais feedback visual. Na última seção, você fornecerá mais feedback de atividade visual criando estilos quando um elemento do formulário está atualmente em uso com a pseudo-classe :focus.

Clarificando os Campos de Formulário Ativos Com :focus

Ao preencher um formulário, é importante que o usuário saiba em qual campo ele está trabalhando atualmente. Isso pode ser feito com o uso da pseudo-classe :focus. Por padrão, os navegadores empregam 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 corresponde à estética do seu formulário.

Para começar a trabalhar com os estados de :focus dos campos do formulário, abra o arquivo styles.css no seu editor de texto. Crie um seletor de grupo para input, select e textarea, todos com uma pseudo-classe :focus, conforme destacado no seguinte bloco de código:

styles.css
...
input,
select,
textarea {
  ...
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  box-shadow: 0 0 0 4px hsl(213, 90%, 70%);
}

input[type="text"],
input[type="email"],
select,
textarea {
  ...
}
...

Esses estilos removem o valor padrão do 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 a posição e a quantidade de desfoque da sombra. O quarto é chamado de espalhamento, 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 tem a mesma cor azul. O objetivo e a intenção de um estado de foco é chamar a atenção perceptível para o elemento focado, então você distinguirá esses contornos de formas diferentes.

Adicione um seletor button:focus ao arquivo styles.css. No bloco do seletor, desative o padrão de outline e adicione uma propriedade box-shadow. As posições, desfoque e valores de 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:

styles.css
...
button {
  ...
}

button:focus {
  outline: none;
  box-shadow: 0 0 0 4px black;
}

button[type="submit"] {
  ...
}
...

Salve suas alterações no arquivo styles.css e retorne ao seu navegador. Atualize index.html e comece a pressionar a tecla Tab para que o foco mude 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 de formulário está em foco. Essa estilização visual é útil para usuários de entrada por mouse, toque e teclado.

Conclusão

Os 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ê usou a pseudo-classe :checked para criar estados selecionados para botões de rádio e caixas de seleção. Em seguida, você adicionou conteúdo de placeholder e combinou o estilo com o pseudo-elemento ::placeholder. Depois de criar estilos de botão personalizados, você aplicou estilos de :focus fornecendo um valioso feedback de interação visual para os 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