CSS input effect not working, if required is removed
The label effect will work if needed on the input tag. But the effect won't work if I remove the required attribute Click to see a working script Is there a solution for this.
Html
<div class="group ">
<input type="text" required="" class="module-input" />
<label >Name</label>
</div>
Excerpt:
.module-input {
font-size: 14px;
padding-top: 12px;
display: block;
width: 97%;
border: none;
border-bottom: 1px solid #94a3a9;
background-color: transparent;
color: #5a686d;
margin-bottom: 2%;
}
input:focus {
outline: none;
}
.group {
position: relative;
margin-bottom: 25px;
}
/* LABEL */
label {
color: #94a3a9;
font-size: 14px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 0.5%;
top: 10px;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
/* active state */
input:focus+label,
input:valid+label {
top: -8px;
font-size: 12px;
color: #94a3a9;
}
<div class="group ">
<input type="text" class="module-input" />
<label>Name</label>
</div>
source to share
You have CSS like input:valid ~ label
Which means: put a label on top if the input is valid.
Removing the attribute required
makes the input valid by default. Thus, without the attribute, required
the label effect will not work by default.
You should use something like input[required]:valid ~ label
source to share
If you update the rule with an attribute selector input[required]:valid ~ label
, it works like the attributerequired
What happens when input
has no attribute reqiured
, it is considered valid, so the rule runs immediately.
Update
To handle this correctly, since :empty
won't work on elements input
, I added a little script and an attribute selector that is set on change and then the CSS rule checks it is empty
window.addEventListener('load', function() {
var inp = document.querySelectorAll('input');
for (var i = 0; i < inp.length; i++) {
inp[i].addEventListener('change', function() {
this.setAttribute("data-value", this.value);
})
}
})
.module-input {
font-size: 14px;
padding-top: 12px;
display: block;
width: 97%;
border: none;
border-bottom: 1px solid #94a3a9;
background-color: transparent;
color: #5a686d;
margin-bottom: 2%;
}
input:focus {
outline: none;
}
.group {
position: relative;
margin-bottom: 25px;
}
/* LABEL */
label {
color: #94a3a9;
font-size: 14px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 0.5%;
top: 10px;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
/* active state */
input[data-value]:not([data-value=""]) ~ label,
input:focus ~ label {
top: -8px;
font-size: 12px;
color: #94a3a9;
}
<div class="group ">
<input type="text" class="module-input" required="" />
<label>Name</label>
</div>
<div class="group ">
<input type="text" class="module-input" />
<label>Address</label>
</div>
source to share