[TUTORIAL] Ícones no formulário de login

De modo a embelezar os nossos fóruns, veremos agora uma dica de CSS simples para adicionar ícones nos campos de login.

--> Tutoriais, dicas e astúcias <--
Ícones no formulário de login

1º - Código a ser utilizado:
Aqui temos o código que será aplicado, conforme será explicado no passo 2:

Código:

.user_login_form input[type="password"], .user_login_form input[type="text"] {
    padding: 5px;
    border-radius: 0px!important;
    cursor: text;
    top: 0px;
}
.user_login_form input[type="text"] {
    background: url(http://i.imgur.com/3CBLHUK.png)no-repeat left center;
    padding-left: 20px;
}
.user_login_form input[type="password"] {
    background: white url(http://i.imgur.com/Bmg6BFf.png)no-repeat;
    padding-left: 20px;
}
#username {
    padding: 5px;
    border-radius: 0px!important;
    cursor: text;
    top: 0px;
    padding-left: 20px;
    background: white url(http://i.imgur.com/3CBLHUK.png)no-repeat;
}
#password {
    padding: 5px;
    border-radius: 0px!important;
    cursor: text;
    top: 0px;
    background: white url(http://i.imgur.com/Bmg6BFf.png)no-repeat;
    padding-left: 20px;
}

2º - Aplicando código CSS:
Agora deverá seguir um esquema de onde o código deverá ser adicionado:
Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS

• Resultado:
  
  

---

© Fórum dos Fóruns

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Ícones no formulário de login