Creé un campo de entrada, pero cuando un usuario hace clic fuera de la entrada del usuario, el texto de intervalo se superpone al texto de entrada. ¿Cómo puedo evitar que esto suceda? ¡Siento que lo he probado todo!
.label { display: inline-block; margin: 10px; } .form-input { margin: 10px; } .label span { z-index: 1; position: absolute; cursor: text; pointer-events: none; color: #999; padding-left: 10px; line-height: 54px; font-family: Arial, Helvetica, sans-serif; transition: all ease-out 0.1s; } .label:focus-within>span { /* Move span text up on focus */ line-height: 26px; font-size: 12px; transition: ease-in-out 0.2s; color: rgb(29, 161, 242); } .label input { z-index: 0; width: 258px; height: 22px; padding-bottom: 14px; padding-top: 14px; padding-left: 9px; font-size: 16px; font-family: Arial, Helvetica, sans-serif } .label input:focus { padding-top: 20px; padding-bottom: 8px; transition: all ease-in-out 0.1s; } <div> <form class='form-input'> <label class='label'> <span class='span-text'>Email</span> <input value=''></input> </label> </form> </div>Tengo algunos cambios en tu código html y css con menos código.
Primero necesitas cambios en Elementos :
<label class='label'> <span class='span-text'>Email</span> <input value=''></input> </label>Aplicar para :
<label class="label"> <input type="text" class="inputText" required/> <span class="span-text">Email</span> </label>Segundos cambios en CSS
En los cambios de enfoque:
Eliminar CSS:
.label input:focus { padding-top: 20px; padding-bottom: 8px; transition: all ease-in-out 0.1s; }AGREGAR CSS:
input:focus ~ .span-text, input:not(:focus):valid ~ .span-text{ top: 16px; font-size: 12px; opacity: 1; color: rgb(29, 161, 242); }Para etiqueta de etiqueta:
Eliminar CSS:
.label span { z-index: 1; position: absolute; cursor: text; pointer-events: none; color: #999; padding-left: 10px; line-height: 54px; font-family: Arial, Helvetica, sans-serif; transition: all ease-out 0.1s; }Añadir CSS:
.span-text { position: absolute; pointer-events: none; left: 20px; top: 27px; color: #999; transition: 0.2s ease all; } input:focus ~ .span-text, input:not(:focus):valid ~ .span-text{ top: 16px; font-size: 12px; opacity: 1; color: rgb(29, 161, 242); } .inputText { width: 258px; height: 22px; padding-bottom: 10px; padding-top: 20px; padding-left: 9px; font-size: 16px; } .span-text { position: absolute; pointer-events: none; left: 20px; top: 27px; color: #999; transition: 0.2s ease all; } <form class='form-input'> <div class="label"> <input type="text" class="inputText" required/> <span class="span-text">Email</span> </div> </form>