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.

Post History

71%

+3 −0

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?

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...

1 answer · posted 2y ago by nobodyImportant‭ · edited 2y ago by hkotsubo‭

Question javascript html css

#4: Post edited by

hkotsubo‭ · 2021-09-10T19:00:12Z (over 2 years ago)
Removed noise, added correct syntax highlight

Copy Link

Raw

Markdown

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](https://accounts.google.com/signin/v2/challenge/pwd?continue=https%3A%2F%2Fmail.google.com%2Fmail%2F&service=mail&sacu=1&rip=1&flowName=GlifWebSignIn&flowEntry=ServiceLogin&cid=1&navigationDirection=forward&TL=AM3QAYam8XutnHkPtz69Y1z6fBVjoUxg0EJaZdp70njDom4_RG15iJ_ypwwKmH_7) 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](https://software.codidact.com/uploads/6fip8EdwVb8CzoEwnuXjN7Ct)
After clicking in the box:
> ![After the text box is being clicked](https://software.codidact.com/uploads/RE5SQFZ7gqVJh88K4AfxHyqz)
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's still a failure:~~
~~<!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. Thanks.~~
~~(P.S. Please do let me know if my question is off-topic.)~~

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](https://accounts.google.com/signin/v2/challenge/pwd?continue=https%3A%2F%2Fmail.google.com%2Fmail%2F&service=mail&sacu=1&rip=1&flowName=GlifWebSignIn&flowEntry=ServiceLogin&cid=1&navigationDirection=forward&TL=AM3QAYam8XutnHkPtz69Y1z6fBVjoUxg0EJaZdp70njDom4_RG15iJ_ypwwKmH_7) 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](https://software.codidact.com/uploads/6fip8EdwVb8CzoEwnuXjN7Ct)
After clicking in the box:
> ![After the text box is being clicked](https://software.codidact.com/uploads/RE5SQFZ7gqVJh88K4AfxHyqz)
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:
```html
<!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.

javascript html css

#3: Post edited by

nobodyImportant‭ · 2021-09-09T19:03:11Z (over 2 years ago)

Copy Link

Raw

Markdown

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](https://accounts.google.com/signin/v2/challenge/pwd?continue=https%3A%2F%2Fmail.google.com%2Fmail%2F&service=mail&sacu=1&rip=1&flowName=GlifWebSignIn&flowEntry=ServiceLogin&cid=1&navigationDirection=forward&TL=AM3QAYam8XutnHkPtz69Y1z6fBVjoUxg0EJaZdp70njDom4_RG15iJ_ypwwKmH_7) 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](https://software.codidact.com/uploads/6fip8EdwVb8CzoEwnuXjN7Ct)
After clicking in the box:
> ![After the text box is being clicked](https://software.codidact.com/uploads/RE5SQFZ7gqVJh88K4AfxHyqz)
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's still a failure:
<!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? Thanks.~~
(P.S. Please do let me know if my question is off-topic.)

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](https://accounts.google.com/signin/v2/challenge/pwd?continue=https%3A%2F%2Fmail.google.com%2Fmail%2F&service=mail&sacu=1&rip=1&flowName=GlifWebSignIn&flowEntry=ServiceLogin&cid=1&navigationDirection=forward&TL=AM3QAYam8XutnHkPtz69Y1z6fBVjoUxg0EJaZdp70njDom4_RG15iJ_ypwwKmH_7) 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](https://software.codidact.com/uploads/6fip8EdwVb8CzoEwnuXjN7Ct)
After clicking in the box:
> ![After the text box is being clicked](https://software.codidact.com/uploads/RE5SQFZ7gqVJh88K4AfxHyqz)
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's still a failure:
<!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. Thanks.
(P.S. Please do let me know if my question is off-topic.)

#2: Post edited by

nobodyImportant‭ · 2021-09-09T19:02:36Z (over 2 years ago)

Copy Link

Raw

Markdown

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](https://accounts.google.com/signin/v2/challenge/pwd?continue=https%3A%2F%2Fmail.google.com%2Fmail%2F&service=mail&sacu=1&rip=1&flowName=GlifWebSignIn&flowEntry=ServiceLogin&cid=1&navigationDirection=forward&TL=AM3QAYam8XutnHkPtz69Y1z6fBVjoUxg0EJaZdp70njDom4_RG15iJ_ypwwKmH_7) 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](https://software.codidact.com/uploads/6fip8EdwVb8CzoEwnuXjN7Ct)
After clicking in the box:
> ![After the text box is being clicked](https://software.codidact.com/uploads/RE5SQFZ7gqVJh88K4AfxHyqz)
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's still a failure:
<!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? Thanks.~~

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](https://accounts.google.com/signin/v2/challenge/pwd?continue=https%3A%2F%2Fmail.google.com%2Fmail%2F&service=mail&sacu=1&rip=1&flowName=GlifWebSignIn&flowEntry=ServiceLogin&cid=1&navigationDirection=forward&TL=AM3QAYam8XutnHkPtz69Y1z6fBVjoUxg0EJaZdp70njDom4_RG15iJ_ypwwKmH_7) 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](https://software.codidact.com/uploads/6fip8EdwVb8CzoEwnuXjN7Ct)
After clicking in the box:
> ![After the text box is being clicked](https://software.codidact.com/uploads/RE5SQFZ7gqVJh88K4AfxHyqz)
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's still a failure:
<!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? Thanks.
(P.S. Please do let me know if my question is off-topic.)

#1: Initial revision by

nobodyImportant‭ · 2021-09-09T19:01:38Z (over 2 years ago)

Copy Link

Raw

Markdown

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](https://accounts.google.com/signin/v2/challenge/pwd?continue=https%3A%2F%2Fmail.google.com%2Fmail%2F&service=mail&sacu=1&rip=1&flowName=GlifWebSignIn&flowEntry=ServiceLogin&cid=1&navigationDirection=forward&TL=AM3QAYam8XutnHkPtz69Y1z6fBVjoUxg0EJaZdp70njDom4_RG15iJ_ypwwKmH_7) 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](https://software.codidact.com/uploads/6fip8EdwVb8CzoEwnuXjN7Ct)

After clicking in the box:
> ![After the text box is being clicked](https://software.codidact.com/uploads/RE5SQFZ7gqVJh88K4AfxHyqz)



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's still a failure:



    <!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? Thanks.

javascript html css

Communities

Post History