problem with linked label to focused Input Restrictions in html / css - html

Question

I created a form submit on html/css... pls check it out in this link below
https://codepen.io/letsimoo/pen/PobxGRG
HTML Code
<form action="">
<div class="container">
<input class="required-input" type="text" id="name" required />
<label class="required-label" for="name">Name:</label>
</div>
<div class="container">
<input class="required-input" type="text" id="email" required />
<label class="required-label" for="email">Email:</label>
</div>
<div class="container" >
<input class="not-required-input" type="text" id="budget"/>
<label class="not-required-label" for="budget">Budget:</label>
</div>
<div class="container">
<input class="required-input" type="text" id="Message" required style="height: 100px"/>
<label class="required-label" for="Message">Message:</label>
</div>
<input type="submit" value="Submit">
</form>
CSS Code
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);
* {
box-sizing: border-box;
}
/*Just to center the Form*/
form {
height: 100%;
width: 400px;
overflow: auto;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* A container to position LABELS */
.container {
position: relative;
/* top: auto;
left: auto;
width: auto; */
}
.required-input {
padding: 1em;
border: 1px solid #ccc;
-webkit-box-shadow: inset 0 1px 0 #eee, #fff 0 1px 0;
box-shadow: inset 0 1px 0 #eee, #fff 0 1px 0;
border-radius: 5px;
width: 100%;
background-color: black;
color: lightgray;
}
/* I put label on top of the input*/
.required-label {
position: absolute;
top: 0;
right: 1px;
bottom: 1px;
left: 0.5em;
z-index: 1;
height: 1em;
font-size: 13px;
line-height: 3.5em;
color: #999;
white-space: nowrap;
cursor: text;
transition: all 0.1s ease;
font-family: "Open Sans", sans-serif;
height: 100%;
}
/* making exception for Budget */
.not-required-input {
padding: 1em;
border: 1px solid #ccc;
-webkit-box-shadow: inset 0 1px 0 #eee, #fff 0 1px 0;
box-shadow: inset 0 1px 0 #eee, #fff 0 1px 0;
border-radius: 5px;
width: 100%;
background-color: black;
color: lightgray;
}
.not-required-label {
position: absolute;
top: 0;
right: 1px;
bottom: 1px;
left: 0.5em;
z-index: 1;
height: 1em;
font-size: 13px;
line-height: 3.5em;
color: #999;
white-space: nowrap;
cursor: text;
transition: all 0.1s ease;
font-family: "Open Sans", sans-serif;
height: 100%;
}
.required-input:focus ~ .required-label,
.required-input:valid ~ .required-label {
font-size: 9px;
font-weight: bold;
left: 5px;
top: -5px;
}
/* making exception for Budget */
.not-required-input:focus ~ .not-required-label,
.not-required-input:invalid ~ .not-required-label {
font-size: 9px;
font-weight: bold;
left: 5px;
top: -5px;
}
.required-input:valid ~ .required-label {
color: #497495;
}
.required-input:focus:invalid ~ .required-label {
color: red;
}
.required-input:required ~ .required-label::before {
content: "*";
color: red;
}
.required-input:required:valid ~ .required-label::before {
color: #497495;
}
The only issue that I'm facing in this form is when selecting the (not-required) field which is (Budget) as you saw in the link after finish writing in that field or after it get unfocused, the label back to its old position and value!
Can you help me to figure out where is the mistake in the elements selection and what shall I do instead please?
Ps. when I set the input restriction of (Budget) to *required it will not have any problem!

Answer 1

You have :invalid for an element that can't be invalid. Since it doesn't have required, it will always come out as invalid. My answer comes from this blog.
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);
* {
box-sizing: border-box;
}
/*Just to center the Form*/
form {
height: 100%;
width: 400px;
overflow: auto;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* A container to position LABELS */
.container {
position: relative;
/* top: auto;
left: auto;
width: auto; */
}
/* making exception for Budget */
.not-required-input {
padding: 1em;
border: 1px solid #ccc;
-webkit-box-shadow: inset 0 1px 0 #eee, #fff 0 1px 0;
box-shadow: inset 0 1px 0 #eee, #fff 0 1px 0;
border-radius: 5px;
width: 100%;
background-color: black;
color: lightgray;
}
.not-required-label {
position: absolute;
top: 0;
right: 1px;
bottom: 1px;
left: 0.5em;
z-index: 1;
height: 1em;
font-size: 13px;
line-height: 3.5em;
color: #999;
white-space: nowrap;
cursor: text;
transition: all 0.1s ease;
font-family: "Open Sans", sans-serif;
height: 100%;
}
/* making exception for Budget */
.not-required-input:focus ~ .not-required-label,
.not-required-input:invalid ~ .not-required-label,
.not-required-input:not(:placeholder-shown) ~ .not-required-label {
font-size: 9px;
font-weight: bold;
left: 5px;
top: -5px;
}
<form action="">
<div class="container" >
<input class="not-required-input" type="text" id="budget" placeholder=""/>
<label class="not-required-label" for="budget">Budget:</label>
</div>
<input type="submit" value="Submit">
</form>
What I have done is add .not-required-input:not(:placeholder-shown) ~ .not-required-label to your CSS and placeholder="" to the HTML. Of course, placeholders disappear when the user types into the input, so the pseudo :not(:placeholder-shown) will fire when user types into the input. I have only tested this in Firefox but it should work for all browsers. If needed, you can add a space into the placeholder for cross-browser support.