Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Imagem ao lado dos inputs nome e email

No penultimo exercicio do capitulo 10 ficou faltando incluir e posicionar os icones ao lado dos inputs do campo nome e email. Alguem implementou?

4 respostas

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?

solução!

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