CSS input effect not working if required is removed [duplicate]

Question

The label effect will work if required is there in input tag. But the effect will not work if i remove the required attribute Click to see working fiddle Is there any solution for this.

html

<div class="group ">
<input type="text" required="" class="module-input" />
<label >Name</label>
</div>

Snippet:

.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>

Answer 1

If you update the rule with the attribute selector, input[required]:valid ~ label, this it will work, both with and without the required attribute

What happens is when an input does not have the reqiured attribute it is considered valid, hence the rule kick in immediately.

Updated

To be able to handle this properly, since :empty won't work on input elements, I added a small script and an attribute selector, which being set on a change and then the CSS rule check if it's 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>

Answer 2

You have the CSS as input:valid ~ label Which means: put the label on top if the input is valid.

When you remove the required attribute, the input becomes valid by default. So without the required attribute, the label effect wont work by default.

You should use something like input[required]:valid ~ label