I created an input field, but when a user clicks off the user input, the span text overlays the input text. How can I prevent this from happening? I feel like I have tried everything!
.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>
Codepen: https://codepen.io/pen?template=GROaJZM
CodePudding user response:
i have some changes of your html & css code with less code.
First you need changes in Elements:
<label class='label'>
<span class='span-text'>Email</span>
<input value=''></input>
</label>
Apply To :
<label >
<input type="text" required/>
<span >Email</span>
</label>
Second Changes In CSS
On Focus changes :
Remove CSS:
.label input:focus {
padding-top: 20px;
padding-bottom: 8px;
transition: all ease-in-out 0.1s;
}
ADD CSS :
input:focus ~ .span-text,
input:not(:focus):valid ~ .span-text{
top: 16px;
font-size: 12px;
opacity: 1;
color: rgb(29, 161, 242);
}
For label tag :
Remove 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;
}
Add 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 >
<input type="text" required/>
<span >Email</span>
</div>
</form>