Move label in placeholder CSS

Question

I have this sample:

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!

`when the user writes something in the input` . That generates an event which you can control with javaScript but not with CSS (only ). Also the selector `input:focus ~ .label` will select the sibling ( down the DOM tree ) of the input with class `label`. `label` and `input` are not siblings. And also if they were, label is BEFORE input. — Mihai T, Sep 11 '19 at 08:00
maybe I did not express myself correctly, on the event of focus, which also exists in CSS — Cristi, Sep 11 '19 at 08:02
The selector `input:focus ~ .label` will select the sibling ( down the DOM tree ) of the `input` with class `label`. `label` and `input` are not siblings. And also if they were, `label` is BEFORE `input`. You cannot select elements up the dom tree, only down. — Mihai T, Sep 11 '19 at 08:03
There is no previous sibling selector nor is there a parent selector so you cannot do this with pure css and your current html structure — Pete, Sep 11 '19 at 08:09
Please research a bit more before posting a question. [You can check this out! This might help!](https://stackoverflow.com/questions/35942247/how-to-move-placeholder-to-top-on-focus-and-while-typing) — Viral, Sep 11 '19 at 08:13
You can use my answer to the same question from the link below: https://stackoverflow.com/a/57632830/11908502 — SMAKSS, Sep 11 '19 at 08:16
Possible duplicate of [How to make a transition effect up the input on change](https://stackoverflow.com/questions/57632607/how-to-make-a-transition-effect-up-the-input-on-change) — SMAKSS, Sep 11 '19 at 08:17

Wassim Al Ahmad · Answer 1 · 2019-09-11T09:48:25.890

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>

score 7 · Accepted Answer · answered Sep 11 '19 at 08:06

7

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>

answered Sep 11 '19 at 08:06

sbrrk

896
1
7
10

you changed the html structure, can you please do the same thing but the html structure given to me remains intact? In the site that I have to develop, it is difficult to change the HTML structure – Cristi Sep 11 '19 at 09:50
The simplest code snippet on the web for floating `placeHolder` ! :) – ehsan_kabiri_33 Jul 03 '21 at 10:12

score 3 · Answer 3 · answered Sep 11 '19 at 09:38

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>

score 2 · Answer 4 · answered Sep 11 '19 at 08:10

2

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>

answered Sep 11 '19 at 08:10

Gerard

15,418
5
30
52

Well, that changes his HTML structure. – Mihai T Sep 11 '19 at 08:13
you changed the html structure, can you please do the same thing but the html structure given to me remains intact? In the site that I have to develop, it is difficult to change the HTML structure – Cristi Sep 11 '19 at 09:49
@Cristi I'm afraid that's not an option. To manipulate the label in CSS when input is triggered, the label must be behind the input in HTML. – Gerard Sep 11 '19 at 09:54
then we need to use javascript to solve the problem right? Can you please fill in your example with javascript so that we get what we want? – Cristi Sep 11 '19 at 09:55

user9408899 · Answer 5 · 2019-09-11T09:19:34.607

2

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>

edited Sep 11 '19 at 09:19

answered Sep 11 '19 at 08:34

user9408899

4,202
3
19
32

ok but if the input has text and I click outside, the label appears above the text. How can we handle this case? – Cristi Sep 11 '19 at 09:04
Updated my answer, check it out. @Cristi – user9408899 Sep 11 '19 at 09:09
Thanks, but now the text is hidden when I click outside. The text should be remain in input :) – Cristi Sep 11 '19 at 09:14
@Cristi Check again :) – user9408899 Sep 11 '19 at 09:20

sbrrk · Answer 6 · 2019-09-11T10:40:14.063

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>

148/5000 yes, it is perfect, the case must also be addressed on the "focusout". At this point if you delete the text, the placeholder stays up, it does not return to its original form — Cristi, Sep 11 '19 at 10:21

Move label in placeholder CSS

6 Answers6