O olhar de um formulário HTML pode ser muito melhorada com CSS:
Styling Campos de Entrada
Utilizar a width propriedade para determinar a largura do campo de entrada:
O exemplo acima se aplica a todos <input> elementos. Se você só quer denominar um tipo de entrada específico, você pode usar seletores de atributo:
-
input[type=text]- só irá selecionar campos de texto -
input[type=password]- só irá selecionar campos de senha -
input[type=number]- só irá selecionar campos de números - etc ..
Entradas acolchoadas
Use o padding propriedade para adicionar espaço dentro do campo de texto.
Dica: Quando você tem muitas entradas após o outro, você pode também querer adicionar um pouco margin , para adicionar mais espaço fora delas:
Exemplo
input[type=text]
{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
} Tente você mesmo "  | Note que temos que definir a box-sizing propriedade para border-box . Isso garante que as fronteiras de enchimento e, eventualmente, estão incluídos na largura e altura total dos elementos. Leia mais sobre o box-sizing propriedade em nossa CSS3 Box Dimensionamento capítulo. |
|---|
Entradas com limites
Use a border propriedade para alterar o tamanho da borda e cor, e usar o border-radius propriedade para adicionar cantos arredondados:
Se você quiser apenas uma borda inferior, use o border-bottom propriedade:
Entradas coloridas
Use a background-color propriedade para adicionar uma cor de fundo para a entrada, ea color propriedade para alterar a cor do texto:
Entradas focalizados
Por padrão, alguns navegadores irá adicionar um contorno azul em torno da entrada quando ele recebe o foco (clicou). Você pode remover esse comportamento adicionando outline: none; à entrada.
Use o :focus selector de fazer alguma coisa com o campo de entrada quando ele obtém foco:
Entrada ícone / imagem com
Se você quer um ícone dentro da entrada, use o background-image bens e posicioná-lo com o background-position propriedade. Note também que nós adicionamos um grande estofo esquerdo para reservar o espaço do ícone:
Exemplo
input[type=text]
{
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat:
no-repeat;
padding-left: 40px;
} Tente você mesmo " Animated Pesquisa Input
Neste exemplo, usamos o CSS3 transition propriedade para animar a largura da entrada da pesquisa, quando se obtém o foco. Você vai aprender mais sobre a transition de propriedade mais tarde, em nossa CSS3 transições capítulo.
Exemplo
input[type=text] {
-webkit-transition: width 0.4s
ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
} Tente você mesmo " styling textAreas
Dica: use o resize propriedade para evitar textareas seja redimensionada (desativar o "grabber" no canto inferior direito):
Exemplo
textarea
{
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
} Tente você mesmo " Styling Select Menus
Exemplo
select
{
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
} Tente você mesmo " Styling botões de entrada
Exemplo
input[type=button], input[type=submit], input[type=reset]
{
background-color: #4CAF50;
border:
none;
color: white;
padding:
16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
/* Tip: use width: 100% for full-width buttons */ Tente você mesmo " Para mais informações sobre como estilo de botões com CSS, leia o nosso CSS botões Tutorial .