[TUTORIAL] Ícones no formulário de login

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

[TUTORIAL] Ícones no formulário de login

Mensagem por Hancki em 10/05/14, 06:38 am



Í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



- 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;
}


- 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
avatar

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8047
Pontos Ativos : 12032

Ver perfil do usuário http://programacaoweb.forumeiros.com/ https://www.facebook.com/djtomoficial https://www.facebook.com/djtomoficial

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum