0

Olá Eu tô um problema na formatação de form em que input esta sobrepondo o label quando a tela e diminuída e eu queria que se posicionasse acima do input quando o tamanho da tela fosse diminuido.

techo html

 <div class="container_form_user">
            <label class="label_form" for="">E-Mail:
                  <input class="input_form_user" type="text">
            </label>
 </div>

Estilo css

    .container_form_user{
    max-width: 570px;
    background-color: blue;
    position: relative;

}
.label_form{
    display: block;
    margin: 10px  0 10px;
    line-height: 37px;
    background-color:rosybrown;
}



.input_form_user{
    height:37px;
    max-width:420px;
    width: 100%;
    background-color: #f4f4f4;
    border-radius:5px;
    position: absolute;
    resize: none;
    right: 0;
}
2
  • 1
    O input tem o mesmo tamanho do label_form e está em absolute, como o label form tem uma margem em cima, o input não respeita essa margem como filho, então sobrepõe, tente colocar o position: absolute; para position: relative; no input Commented 7/06/2019 às 17:40
  • Eu tinha feito isso antes e deu certo, porem o resultado que eu quero e que o input fique todo deslocado a direita e o label a esquerda isso em relação ao container. Commented 7/06/2019 às 17:48

1 Resposta 1

2

O input é inline por natureza, então a minha sugestão é vc fazer um @media e colocar uma medida na qual o seu input vai mudar de inline pra block, assim ele vai quebrar a linha e ficar abaixo do texto. No caso eu defini que em telas de até 768px ele vai ficar na linha de baixo do texto, depois disso eles ficam na mesma linha.

inserir a descrição da imagem aqui

Segue o exemplo da imagem acima:

    .container_form_user{
    max-width: 570px;
    background-color: blue;
    position: relative;

}
.label_form{
    display: block;
    margin: 10px  0 10px;
    line-height: 37px;
    background-color:rosybrown;
}



.input_form_user{
    height:37px;
    max-width:420px;
    width: 100%;
    background-color: #f4f4f4;
    border-radius:5px;
    position: absolute;
    resize: none;
    right: 0;
}

@media (max-width: 768px) {
	.input_form_user {
		display: block;
		min-width: 100%;
	}
}

	
<div class="container_form_user">
    <label class="label_form" for="">E-Mail:
        <input class="input_form_user" type="text">
    </label>
</div>

2
  • 1
    Obrigada pelo esclarecimento, consegui resolver com sua solução. Commented 7/06/2019 às 18:09
  • @RichardCarlos fico feliz em ter ajudado!
    – hugocsl
    Commented 7/06/2019 às 18:29

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .