Aplicando estilo aos formulários

A estilização de formulários segue o mesmo principio dos demais componentes HTML. Considere o formulário abaixo para servir de exemplo:

<form action="">
  <label for="nome">Nome:</label>
  <input type="text" name="nome" id="nome" placeholder="Digite seu nome">
  <label for="sobrenome">Sobrenome:</label>
  <input type="text" id="sobrenome" name="sobrenome" placeholder="Digite seu sobrenome">
  <label for="pais">País:</label>
  <select id="pais" name="pais">
    <option value="australis">Australia</option>
    <option value="brasil">Brasil</option>
    <option value="canada">Canada</option>
    <option value="usa">USA</option>
  </select>
  <input type="submit" value="Enviar!">
</form> 

Dimensão

Você pode controlar a largura/altura dos campos de formulário através dos atributos CSS "width" e "height". As medidas podem ser absolutas ou relativas. Veja o exemplo abaixo que altera a largura de todos os componentes inputs do formulário para 100% de largura:

input{
  box-sizing: border-box;
  width: 100%;
}

O atributo "box-sizing" permite configurar como a propriedade de tamanho será aplicada ao componente. Por padrão, ao definir uma largura/altura, o CSS aplica esse tamanho ao componente sem considerar espaçamentos e borda. Para que o CSS considere a borda e os espaçamentos, deve-se utilizar o valor "border-box" para essa propriedade. Para mais opções, veja este link.

Alteração de fonte dos labels

Para alterar as fontes do label, pode-se utilizar o seletor de tag e aplicar determinado estilo de fonte, assim como em qualquer outro componente. Veja o exemplo:

label {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

Seleção de tag e atributo

O CSS permite selecionar todas as tags que possuem valor em uma propriedade. Essa funcionalidade é especialmente importante nos formulários, já que diferentes tipos de entradas de dados são indicados pelo atributo "type" do campo <input>. Veja exemplo abaixo que aplica estilo apenas nos campos de entrada de texto:

input[type=text] {
  padding: 12px;
  margin: 8px 0px;
  border: 1px solid lightgray;
  border-radius: 4px;
}

Similarmente, podemos alterar o estilo do botão de submissão, através da mesma estratégia.

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
}

A propriedade "cursor" permite controlar o cursor do mouse que será mostrado ao usuário. No exemplo acima, o cursor padrão foi alterado para o valor "pointer", indicado quando se deseja mostrar que um componente é clicável. Para mais opções de cursor, veja este link.