In the present layout, there is an input area attended to going into a message. When this input area is concentrated or picked, the connected tag steps a little upwards, transforms its shade as well as font style dimension, as well as obtains a history shade, which is excellent.
Nevertheless, when going into message in the input area and afterwards clicking outdoors to key in one more area, a problem emerges. In this circumstance, the tag go back to its initial placement as well as comes to be linked with the message, developing an unpleasant look.
To resolve this, my preferred result is that when the tag goes up upon being enter the input area, it ought to stay because raised placement as well as not change back to its initial positioning.
Kindly aid me below.
<.
<< html lang=" en">
<> < head>>.
<< meta charset=" UTF-8">
<> < meta name=" viewport" web content=" size= device-width, initial-scale= 1.0">>.
<< design>>
. input[type="email"] {
display screen: block;
boundary: 1px strong rgb( 228, 228, 228);
font-size: 16px;
size: 20%;
elevation: 55px;
cushioning: 0 15px;.
margin-bottom: 10px;.
placement: family member;.
z-index: 2;.
background-color: clear;.
overview: none;.
border-radius: 5px;.
placement: family member;.
}
. inputs {
placement: family member;.
}
. input-label {
placement: outright;.
top: 15px;.
font-size: 1.1 rapid eye movement;.
left: 14px;.
shade: rgb( 122, 122, 122);.
font-weight: 100;.
shift: 0.1 s convenience;.
background-color: white;.
cushioning: 0 5px;.
}
. input[type="email"]: concentrate ~. input-label {
top: -7 px;.
shade: # 18c9c0;.
font-size: 13px;.
background-color: rgb( 255, 255, 255);.
z-index: 2;.
}
. input[type="email"]: emphasis {
boundary: 2px strong #afff 03;.
}
<.
<< title>> Paper<.
<.
<< body>>.
<< div course=" inputs">
<> < input kind=" e-mail" name="" id=" e-mail" course=" input">
<> < tag for=" e-mail" course=" input-label">> Get in Text<.
<.
<.
<.
