How can I add a floating label to a textarea?-CodePudding

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 >
  <textarea name=""  id="" cols="30" rows="10"></textarea>
  <label >Description of scheme</label>
</div>

CodePudding user response：

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 >
  <textarea name=""  id="" cols="30" rows="10" placeholder=" "></textarea>
  <label >Description of scheme</label>
</div>

CodePudding user response：

use javascript event handler onFocus and onBlur to add and remove class

let texterea = document.getElementsByClassName('inputText');
texterea[0].addEventListener("blur", myScript);
texterea[0].addEventListener("focus", myScript1);
function myScript(){
  if(texterea[0].value == ''){
      texterea[0].classList.remove("textArea");
  }else{
    texterea[0].classList.add("textArea");
  }
}

function myScript1(){
  if(texterea[0].value == ''){
      texterea[0].classList.add("textArea");
  }
}

.textArea ~ .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 >
  <textarea name=""  id="" cols="30" rows="10"></textarea>
  <label >Description of scheme</label>
</div>

Are you looking for something like?