Welcome to Software Development on Codidact!
Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.
How to make the text box such that its placeholder goes up and arranges itself in the centre of the border upon clicking?
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:
After clicking in the box:
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.
1 answer
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.
0 comment threads