Trying to create a material design like textbox, issue in input validation - css

Question

I am trying to create a material design inspired textbox.
I have read similar questions/answers around. However, my question is little different, so kindly read on.
Here is my stylesheet for the page -
.textBoxContainer{
height:50px;
position:relative;
margin:20px;
}
.textbox{
border-bottom: solid 2px #984343;
border-top: none;
border-left: none;
font-family: Candara;
width: 30%;
}
.textbox + .lbl{
position:absolute;
top:0px;
left:0px;
transition:all .2s ease-out;
}
.textbox:focus{
border-bottom: solid 2px #4CAF50;
outline:none;
}
.textbox:focus + label, input:valid+label{
top:-15px;
font-size:10px;
}
Here is the textbox which I am trying to create -
<div class='textBoxContainer'>
<input class='textbox' type="text" />
<label class='lbl'>
phone no....
</label>
</div>
It works fine like a material design inspired textbox, where the text moves up upon typing.
However, after the typing is done, if I move out of the textbox, then the label collapses back again on the textbox.
I was thinking 'input:valid' will help prevent it from happening, but it did not.
I can solve this with javascript, but is there a way around without using js?
I have also tried this putting a 'required' in the input filed, that did not help either.
Please let me know if I should explain any further.

Answer 1

I believe that would require to use javaScript. If you don't want to use javascript, just keep the label on top of the textField, or just use a placeholder.
The way to implement it using JavaScript that would be as follows:
Add a onfocusout event listener to all the textfields which you want that label to stay up.
<input class='textbox' type="text" onfocusout="leaveFocus(event)" />
Next, you have to create the function which gets called everytime the textField looses focus.
function leaveFocus(event) {
const textField = event.target;
// Check if textField is empty
if (textField.value !== '') {
textField.classList.add('has-text);
} else {
// Otherwise, textFiled has text
textField.classList.remove('has-text);
}
}
That function checks to see if the textField is empty. If it is, it removes the class of has-text, and if it has text, it adds the class of has-text.
Now in your css, you have to add has-text to all the styling you have for the label going up, like this:
.textbox:focus, .has-text{
border-bottom: solid 2px #4CAF50;
outline:none;
}
.textbox:focus + label, .has-text + label, input:valid+label{
top:-15px;
font-size:10px;
}
Let me know if this answers your question, and let me know if you need any more help.