How To Position Input Label At The Top If Input Has A Value

I'm trying to create an input. If we click on the input or write something. I want the label to go to the top. how can I keep the shrink class on my label. if the input have a valu

Solution 1:

You can implement it using JavaScript and CSS with :not pseudo class.

• Set inital value of input to "" and set the input value when keyup using Javascript.
• On CSS, using :not pseudo class, you can implement the same style on label like focus.

.input-group .form-input:not([value=""]) ~ .form-input-label,
.input-group .form-input:focus ~ .form-input-label {
  top: -18px;
  left: 5px;
  color: #181d2f;
}

.input-group {
  position: relative;
}

.input-group .form-input {
  display: block;
  background: none;
  background-color: #fff;
  font-size: 1.25rem;
  font-weight: 500;
  padding: 5px;
  width: 100%;
  border: none;
  border-radius: 0;
  border-bottom: 2px solid rgba(0, 0, 0, 0.12);
  margin: 25px 0;
}

.input-group .form-input:focus {
  outline: none;
  border-color: #d80810;
}

.input-group .form-input:not([value=""]) ~ .form-input-label,
.input-group .form-input:focus ~ .form-input-label {
  top: -18px;
  left: 5px;
  color: #181d2f;
}

.input-group .form-input-label {
  color: #8995a2;
  font-size: 14px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 8px;
  top: 8px;
  -webkit-transition: 300ms ease all;
  transition: 300ms ease all;
}

.input-group .form-input-label.shrink {
  top: -18px;
  left: 5px;
  color: #181d2f;
}

<div class="input-group">
  <input type="text" id="username" class="form-input"  onkeyup="this.setAttribute('value', this.value);" value="" />
  <label for="username" class="form-input-label">Username</label>
</div>