CODEWITHSUNDEEP
htmlcss
trenccan
trenccan

Reputation: 720

Move placeholder above the input on focus

I'm looking for css code that move the placeholder text above the input on focus. I found this code here. This code is perfect but my input tag is wrapped inside <span> and for that reason general sibling selector is not working. Any ideas how to edit this css? 

<div>
  <span class='blocking-span'>
  <input type="text" class="inputText" />
  </span>
  <span class="floating-label">Your email address</span>
</div>

Upvotes: 16

Views: 37933

Answers (3)

Stanley
Stanley

Reputation: 4035

You can use the CSS pseudo-selector :placeholder-shown in this case to detect when to move a fake placeholder out of the way. See example below:

label {
  margin:20px 0;
  position:relative;
  display:inline-block;
}
  
span {
  padding:10px;
  pointer-events: none;
  position:absolute;
  left:0;
  top:0;
  transition: 0.2s;
  transition-timing-function: ease;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  opacity:0.5;
}

input {
  padding:10px;
}

input:focus + span, input:not(:placeholder-shown) + span {
  opacity:1;
  transform: scale(0.75) translateY(-100%) translateX(-30px);
}

/* For IE Browsers*/
input:focus + span, input:not(:-ms-input-placeholder) + span {
  opacity:1;
  transform: scale(0.75) translateY(-100%) translateX(-30px);
}
<label>
  <input placeholder=" ">
  <span>Placeholder Text</span>
</label>

Upvotes: 39

Rahul
Rahul

Reputation: 2071

If you change html structure then your reference example is work but if you don't want change html structure then you need to write little jQuery. You can check this.

$(function(){
  $('.blocking-span input').on('focus', function(){
    $(this).parents('.parents-elm').addClass('foucs-content'); // When focus the input area
  });
  $(document).mouseup(function(e){
		if($(e.target).parents('.blocking-span input').length==0 && !$(e.target).is('.blocking-span input')){
			$('.parents-elm').removeClass('foucs-content');
		}
	});
});
div{
  position: relative;
}
.blocking-span{
  display: block;
}
.blocking-span input{
  border: 1px solid #eaeaea;
  height: 80px;
  padding-top: 30px;
  padding-left: 20px;
  padding-right: 20px;
  width: 100%;
}
.floating-label{
  display: inline-block;
  font-size: 15px;
  left: 20px;
  line-height: 20px;
  position: absolute;
  top: -webkit-calc(50% - 10px);
  top: -moz-calc(50% - 10px);
  top: calc(50% - 10px);
  transition: top 0.3s ease-in-out 0s;
}
.foucs-content .floating-label{
  top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="parents-elm">
  <span class='blocking-span'>
  <input type="text" class="inputText" />
  </span>
  <span class="floating-label">Your email address</span>
</div>

Upvotes: 0

Asons
Asons

Reputation: 87191

With the given links CSS etc, simply move the floating-label inside the blocking-span.

By using position: relative on the div the floating-label will still re-position as if it were outside the blocking-span

div {
  position: relative; /*  make label relate to div  */
  padding-top: 10px;  /*  make space for label      */
}
.inputText {
  font-size: 14px;
  width: 200px;
  height: 25px;
}
.floating-label {
  position: absolute;
  pointer-events: none;
  left: 15px;
  top: 18px;
  transition: 0.2s ease all;
}
input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label {
  top: -6px;
}
<div>
  <span class='blocking-span'>
    <input type="text" class="inputText" required/>
    <span class="floating-label">Your email address</span>
  </span>
</div>

Upvotes: 8

Related Questions