No penultimo exercicio do capitulo 10 ficou faltando incluir e posicionar os icones ao lado dos inputs do campo nome e email. Alguem implementou?
No penultimo exercicio do capitulo 10 ficou faltando incluir e posicionar os icones ao lado dos inputs do campo nome e email. Alguem implementou?
Sim, qual a sua dúvida?
Reginaldo essa opção da label ficar ao lado da input é chamado de form-group, para implementa-la você deve utilizar os displays de table.
.form-data-group {
display: table;
}
.form-data-group .form-data {
border-right: 0;
padding: 1rem;
}
.form-data-group-text {
background: #F2F2F2;
border: 1px solid #DCDCDC;
box-sizing: border-box;
display: table-cell;
font-size: .8rem;
line-height: 0;
padding: 1rem;
text-align: center;
vertical-align: middle;
white-space: nowrap;
width: 1%;
}
Basicamente o css seria esse, eu utilizo e funciona corretamente, ai no html ficaria assim:
<div classs="form-data-group">
<input class="form-data">
<span class="form-data-group-text">Teste</span>
</div>
Basta realizar as modificações a seu gosto.
Espero ter ajudado.
Certo. Eu implmentei usando o seguinte CSS que inclui o icone dentro do input:
input[name="nome"] {
background-image: url(../imagens/people-ico.png);
background-repeat: no-repeat;
}
Ocorre que eu estou tentando implementar o icone fora do input ao lado do mesmo. Já tentei flutuar tanto a imagem quanto o input, porém sem êxito. Alguém pode me orientar?
Reginaldo o código que eu postei faz exatamente isso, ele deixa label's ao lado dos input's, para fazer esse tipo de recurso você precisa ter uma div pai englobando o input com a label.
<div class="form-group">
// input e label
</div>
Ai nessa div pai você precisa definir o display: table, agora dentro da div.form-group defina o input com width: 100% e crie uma outra div para ser alinhada ao lado da input.
<div class="form-group">
<input>
<span class="form-data-group-element"></span>
</div>
Nessa div .form-data-group-element defina o display: table-cell e width: 1%, dentro dela ficara um botão, um ícone, uma label.
Obs: Siga o exemplo que eu ja havia postado, ele faz exatamente o que você esta precisando.
Espero ter ajudado