CODEWITHSUNDEEP
htmlcss
Cristi
Cristi

Reputation: 531

Move label in placeholder CSS

I have this sample:

link

CODE HTML:

<div class="field">
    <label>First Name</label>
    <div class="control">
        <input type="text" class="input-text">
    </div>
</div>

CODE CSS:

.field{
  position: relative;
}

.label {
  position: absolute;
  pointer-events: none;
  left: 10px;
  top: 2px;
  transition: 0.2s ease all;
  font-size: 15px;
}

input:focus ~ .label,
input:not(:focus):valid ~ .label {
  top: -6px;
}

Basically I want when the user writes something in the input, the label is moved over the input.

Can this be obtained only from the css?

Can you please change the example I created to understand exactly how this is done?

Thanks in advance!

Upvotes: 8

Views: 7076

Answers (6)

sbrrk
sbrrk

Reputation: 894

I am afraid there is no way(best of my knowledge) to select parent element in css and here we need to select parent div. so i just add little jQuery on input focus to parent div focused.

I know this is not perfect solution as you need but here we only add class by jQuery. 

$('input').focus(function(){
  $(this).parents('.field').addClass('focused');
});

$('input').blur(function(){
  var inputValue = $(this).val();
  if ( inputValue == "" ) {
    $(this).parents('.field').removeClass('focused');  
  } else {
    $(this).addClass('filled');
  }
})  
.field{
  position: relative;
  display:inline-block;
}

label {
  position: absolute;
  pointer-events: none;
  left: 10px;
  top: 2px;
  transition: 0.2s ease all;
  font-size: 15px;
}

.focused label{
  top: -10px;
  font-size:13px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field">
    <label>First Name</label>
    <div class="control">
        <input type="text" class="input-text">
    </div>
</div>

Upvotes: 1

Wassim Al Ahmad
Wassim Al Ahmad

Reputation: 1094

Please try this modest code

.field{
  position: relative;
}

label {
  position: absolute;
  pointer-events: none;
  left: 10px;
  top: 2px;
  transition: 1.2s ease all;
  font-size: 15px;
}
input:focus ~ label{
  top:-10px;
  font-size:12px;
  opacity: 1; 
	margin-left: 45px;  
	transition: all 1.5s ease-out; 
	-webkit-transform: rotate(720deg);   
	zoom: 1;
}
<div class="field">
	<input type="text" class="input-text">
  <label>First Name</label>
</div>

Upvotes: 9

Prakash Rajotiya
Prakash Rajotiya

Reputation: 1033

Hope this may help you.

Please try below code.

  .field{
  position: relative;
  margin-top:20px;
}
input:focus ~ label, input:not(:placeholder-shown) ~ label {
  top:-13px;
  font-size:12px;
background-color: white;
}
label {
  position: absolute;
  pointer-events: none;
  left: 10px;
  top: 2px;
  transition: 0.2s ease all;
  font-size: 15px;
}
<div class="field">
  <div class="control">
      <input type="text" class="input-text" placeholder=" ">
      <label>First Name</label>
  </div>
</div>

Upvotes: 3

user9408899
user9408899

Reputation: 4540

I post this answer to provide an additional solution.

You can make use of translateY and scale properties to achieve that effect.

.field {
  position: relative;
  top: 50px;
}

.text {
  pointer-events: none;
  position: absolute;
  left: 5px;
  transition: transform .3s ease;
}

.input-text {
  color: white;
}

.input-text:focus+.text {
  transform: translateY(-18px) scale(0.88);
}

.input-text:focus {
  color: black;
}
<div class="field">
  <input type="text" class="input-text">
  <label class="text">First Name</label>
</div>

Upvotes: 2

Gerard
Gerard

Reputation: 15786

You can do that on focus. To detect actual typing, you need javascript.

.field {
  position: relative;
}

label {
  position: absolute;
  left: 0;
  top: 21px;
  transition: 0.2s ease all;
  font-size: 15px;
}

.input-text {
  position: absolute;
  left: 0;
  top: 20px;
}

input:focus + label {
  top: 0;
}
<div class="field">
  <input type="text" class="input-text">
  <label>First Name</label>
</div>

Upvotes: 2

sbrrk
sbrrk

Reputation: 894

i hope this is what you need. but there is a problem when you unfocused input.

i just make little changes in HTML.

.field{
  position: relative;
}

label {
  position: absolute;
  pointer-events: none;
  left: 10px;
  top: 2px;
  transition: 0.2s ease all;
  font-size: 15px;
}
input:focus ~ label{
  top:-10px;
  font-size:12px;
}
<div class="field">
	<input type="text" class="input-text">
  <label>First Name</label>
</div>

Upvotes: 7

Related Questions