How can I add a floating label to a textarea?

user_18543053 0
Viewed 392

I want that when a user comes and tries to type text in "textarea" the label goes up, and if they leave that area blank it comes back to the original position. If user typed something over there it will stay up there.

I tried this code with input box it is working fine, but when I try to do this with textarea and add some input in text area the label coming back down it need to be stay up there.

textarea:focus~.floating-label,
input:not(:focus):valid~.floating-label {
  top: -40px;
  bottom: 10px;
  left: 10px;
  font-size: 25px;
  opacity: 1;
  color: rgb(100, 6, 6);
}

.scheme-des textarea {
  width: 90%;
  height: 50vh;
  resize: none;
  padding: 10px 20px 0 20px;
  font-size: 140%;
  color: #000;
}

.floating-label {
  position: absolute;
  pointer-events: none;
  left: 20px;
  top: 10px;
  transition: 0.2s ease all;
  color: #999999;
  font-size: 120%;
}

.form-float {
  position: relative;
  margin-bottom: 30px;
}
<div class="form-float scheme-des">
  <textarea name="" class="inputText" id="" cols="30" rows="10"></textarea>
  <label class="floating-label">Description of scheme</label>
</div>

css html
1 Answers

You can add a blank placeholder and then add textarea:not(:placeholder-shown)~.floating-label selector to your first CSS rule.

Here is the result after doing that:

textarea:focus~.floating-label,
textarea:not(:placeholder-shown)~.floating-label,
input:not(:focus):valid~.floating-label {
  top: -40px;
  bottom: 10px;
  left: 10px;
  font-size: 25px;
  opacity: 1;
  color: rgb(100, 6, 6);
}

.scheme-des textarea {
  width: 90%;
  height: 50vh;
  resize: none;
  padding: 10px 20px 0 20px;
  font-size: 140%;
  color: #000;
}

.floating-label {
  position: absolute;
  pointer-events: none;
  left: 20px;
  top: 10px;
  transition: 0.2s ease all;
  color: #999999;
  font-size: 120%;
}

.form-float {
  position: relative;
  margin-bottom: 30px;
}
<div class="form-float scheme-des">
  <textarea name="" class="inputText" id="" cols="30" rows="10" placeholder=" "></textarea>
  <label class="floating-label">Description of scheme</label>
</div>

user_119350260
Related