CODEWITHSUNDEEP
htmlcss
Toby
Toby

Reputation: 717

How to make fake placeholder go up on focus

Fiddle: And here is my code:

.accountbox {
   	background-color:#ffffff;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	-ms-transform:translate(-50%,-50%);
	padding: 15px 120px 50px 50px;	
}

:focus{outline: none;}

.input1div {
	display:inline-block;  position: relative;
}

.input1div input {
	font: 15px/24px "Lato", Arial, sans-serif; color: #333; width: 100%; box-sizing: border-box; letter-spacing: 1px;
}

.input1div input {border: 0; padding: 7px 0; border-bottom: 1px solid #ccc;}

.input1div input ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s;}
.input1div input:focus ~ .focus-border{width: 100%; transition: 0.4s;}


 .fakeplaceholder {
  position: absolute;
  pointer-events: none;
  left: 20px;
  top: 18px;
  transition: 0.28s ease all;
}

.firstname:focus ~ .fakeplaceholder{
  top: -10px;
  bottom: 10px;
  left: 0px;
  font-size: 11px;
  opacity: 1;
  color:red;
} 
<div class="accountbox">
    
    <form class="accountform">
		
        <div class="input1div">
            <input class="firstname" type="text" name="firstname" placeholder="" />
						<span class="fakeplaceholder">First Name</span> 
					  <span class="focus-border"></span>
			  </div>
     
    </form>

</div>

If you click on the input box, then the .fakeplaceholder will go up.

But I want something more:

Expected result:

  1. On focus, fakeplaceholder will go up ---- WORKING
  2. If the user type some text in it, and then remove the focus, it will stay up -- Not working

I tried to use this code, in order to achieve what I want, but it does not work (test it out)

.firstname:not(:focus):valid ~ .fakeplaceholder{
  top: -10px;
  bottom: 10px;
  left: 0px;
  font-size: 11px;
  opacity: 1;
  color:red;
}

Upvotes: 0

Views: 136

Answers (1)

kyun
kyun

Reputation: 10294

var input = document.querySelector('.firstname');
var placeholder = document.querySelector('.fakeplaceholder');

input.addEventListener('change',function(){
  if(this.value == ''){
    placeholder.classList.remove('isValid');
  }else{
    placeholder.classList.add('isValid');
  }
})
.accountbox {
   	background-color:#ffffff;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	-ms-transform:translate(-50%,-50%);
	padding: 15px 120px 50px 50px;	
}

:focus{outline: none;}

.input1div {
	display:inline-block;  position: relative;
}

.input1div input {
	font: 15px/24px "Lato", Arial, sans-serif; color: #333; width: 100%; box-sizing: border-box; letter-spacing: 1px;
}

.input1div input {border: 0; padding: 7px 0; border-bottom: 1px solid #ccc;}

.input1div input ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s;}
.input1div input:focus ~ .focus-border{width: 100%; transition: 0.4s;}


 .fakeplaceholder {
  position: absolute;
  pointer-events: none;
  left: 20px;
  top: 18px;
  transition: 0.28s ease all;
}

.firstname:focus ~ .fakeplaceholder{
  top: -10px;
  bottom: 10px;
  left: 0px;
  font-size: 11px;
  opacity: 1;
  color:red;
}

.isValid{
  top: -10px;
  bottom: 10px;
  left: 0px;
  font-size: 11px;
  opacity: 1;
  color:red;
}
<div class="accountbox">
    <form class="accountform">
        <div class="input1div">
            <input class="firstname" type="text" name="firstname" placeholder="" />
			<span class="fakeplaceholder">First Name</span> 
			<span class="focus-border"></span>
		</div>
    </form>
</div>

Upvotes: 1

Related Questions