Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs

Dashboard
Notifications
Mark all as read
Q&A

How to make the text box such that its placeholder goes up and arranges itself in the centre of the border upon clicking?

+3
−0

How to make the placeholder so that it goes to the top of the border line on click?

For example, when you go to Gmail and click on the input field, the placeholder text goes up and arranges itself to the left and in centre of the border-line. Here are screenshots of what I mean:

Before clicking:

Before clicking the text box

After clicking in the box:

After the text box is being clicked

The placeholder text ('Enter your password' in this case) goes up smoothly as you click in the box.

Unfortunately, I'm not fluent in programming enough to do that myself. The best I could do was this, but it doesn't work:

<!DOCTYPE html>
<html>
  <head>
    <style> 
    input[type=password] {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        box-sizing: border-box;
        border: 1px solid #cccc;
        -webkit-transition: 0.5s;
        transition: 0.5s;
        outline: none;
    }

    input[type=password]:focus {
        border: 2px solid blue;
    }
    </style>
  </head>
  <body>
    <form>
    <input type="password" id="pass" name="pass" placeholder="Enter your password">
  </body>
</html>

Can anyone show me how I could do that? I would like to do it with CSS and HTML only, but JavaScript would also suffice.

Why does this post require moderator attention?
You might want to add some details to your flag.
Why should this post be closed?

0 comment threads

1 answer

+4
−0

The basic ideia is to create an input with a "fake" placeholder, and a span that will serve as the actual placeholder text. Then you group both inside a label, like this:

<label>
  <input type="password" placeholder=" ">
  <span>Enter your password</span>
</label>

Note the input's "fake" placeholder (just a single space). We'll use it just to know when the placeholder is being displayed or not (such as when you click in the input field - in that case, the placeholder disappears so you can type). To detect when the placeholder is being displayed, we're gonna use the placeholder-shown pseudo-class.

The actual placeholder text is whatever it is inside the span, so we just need some CSS adjustments to place it where we need:

label {
  position: relative;
  display: inline-block;
}
  
span {
  padding: 10px;
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  transition: 0.4s;
  opacity: 0.5;
}

input {
  padding: 10px;
}

/* When input is focused, or the placeholder is not being displayed, change the border to blue */
input:focus, input:not(:placeholder-shown) {
  outline: none;
  border-color: blue; 
}

/* When input is focused, or the placeholder is not being displayed, change the placeholder size, position and color */
input:focus + span, input:not(:placeholder-shown) + span {
  opacity: 1;
  background-color: white;
  color: blue;
  transform: scale(0.75) translateY(-65%) translateX(-20px);
}

We use input:focus and input:not(:placeholder-shown) to know when the placeholder must be moved to the top (the former is for when we click on it, the latter is for any situation when the placeholder is not being shown, such as when there's something already typed in the input field, regardless of its focus).

In those cases, the input changes its border color, and the placeholder (the span content) is moved to the top (translateY and translateX), with a smaller size (scale(0.75)), and I also change its color - and the background color, so the text is shown over the input border.

And you can also play with the transition values to control how the placeholder is animated: the 0.4s is the time it takes to move from/to the top (0.4 seconds), and there are lots of other options available, to achieve different effects.


You can see this example running here.

Why does this post require moderator attention?
You might want to add some details to your flag.

1 comment thread

Thank you so much! (1 comment)

Sign up to answer this question »