How to create a dynamic placeholder for a login page?
1
The current GMail Login Page has an "Email or phone" placeholder text that reduces in size and moves towards the top-left corner of the field on focus. How to achieve something similar using CSS and/or JS?
javascript css web google-login login-page
asked Dec 27 '18 at 14:57
Varun Gupta
82
New contributor
Varun Gupta is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
1
The current GMail Login Page has an "Email or phone" placeholder text that reduces in size and moves towards the top-left corner of the field on focus. How to achieve something similar using CSS and/or JS?
javascript css web google-login login-page
asked Dec 27 '18 at 14:57
Varun Gupta
82
New contributor
Varun Gupta is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
By the way, you're talking about an Angular Material input component. Material is an awesome Angular library that might come handy
– Nino Filiu
Dec 27 '18 at 15:08
Oh, thank you so much for that. Looks like exactly what I need.
– Varun Gupta
Dec 27 '18 at 15:28
add a comment |
1
1
1
The current GMail Login Page has an "Email or phone" placeholder text that reduces in size and moves towards the top-left corner of the field on focus. How to achieve something similar using CSS and/or JS?
javascript css web google-login login-page
asked Dec 27 '18 at 14:57
Varun Gupta
82
New contributor
Varun Gupta is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
The current GMail Login Page has an "Email or phone" placeholder text that reduces in size and moves towards the top-left corner of the field on focus. How to achieve something similar using CSS and/or JS?
javascript css web google-login login-page
javascript css web google-login login-page
asked Dec 27 '18 at 14:57
Varun Gupta
82
New contributor
Varun Gupta is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked Dec 27 '18 at 14:57
Varun Gupta
82
New contributor
Varun Gupta is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked Dec 27 '18 at 14:57
Varun Gupta
82
New contributor
Varun Gupta is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked Dec 27 '18 at 14:57
Varun Gupta
82
asked Dec 27 '18 at 14:57
Varun Gupta
82
82
New contributor
Varun Gupta is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Varun Gupta is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Varun Gupta is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
By the way, you're talking about an Angular Material input component. Material is an awesome Angular library that might come handy
– Nino Filiu
Dec 27 '18 at 15:08
Oh, thank you so much for that. Looks like exactly what I need.
– Varun Gupta
Dec 27 '18 at 15:28
add a comment |
By the way, you're talking about an Angular Material input component. Material is an awesome Angular library that might come handy
– Nino Filiu
Dec 27 '18 at 15:08
Oh, thank you so much for that. Looks like exactly what I need.
– Varun Gupta
Dec 27 '18 at 15:28
By the way, you're talking about an Angular Material input component. Material is an awesome Angular library that might come handy
– Nino Filiu
Dec 27 '18 at 15:08
By the way, you're talking about an Angular Material input component. Material is an awesome Angular library that might come handy
– Nino Filiu
Dec 27 '18 at 15:08
Oh, thank you so much for that. Looks like exactly what I need.
– Varun Gupta
Dec 27 '18 at 15:28
Oh, thank you so much for that. Looks like exactly what I need.
– Varun Gupta
Dec 27 '18 at 15:28
add a comment |
2 Answers
2
active
oldest
votes
2
first of all, welcome to StackOverflow!
It's called "floating labels", and it can be achieved by using CSS alone (which can turn out to be a little hard if you are not really familiar with pseudo-selectors like :focus and :empty) or by using a little of JS, which may be a little easier.
You can take a look at some examples here: https://css-tricks.com/float-labels-css/
answered Dec 27 '18 at 15:03
Renan Souza
380114
Thanks a lot, Renan! Those examples gave me a fair idea how "floating labels" work. I tried looking into the source of GMail's login page but it became too confusing to figure out because of all the randomly named classes and field names. This was much better to understand.
– Varun Gupta
Dec 27 '18 at 15:25
No problem! Hope you can achieve a great result. Usually inspecting the code of large applications can be pretty tough.
– Renan Souza
Dec 27 '18 at 15:30
add a comment |
1
An easy and simple example for you:
label {
margin:20px 0;
position:relative;
display:inline-block;
}
span {
padding:10px;
pointer-events: none;
position:absolute;
left:0;
top:0;
transition: 0.2s;
transition-timing-function: ease;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
opacity:0.5;
}
input {
padding:10px;
}
input:focus + span, input:not(:placeholder-shown) + span {
opacity:1;
transform: scale(0.75) translateY(-100%) translateX(-30px);
}
/* For IE Browsers*/
input:focus + span, input:not(:-ms-input-placeholder) + span {
opacity:1;
transform: scale(0.75) translateY(-100%) translateX(-30px);
}<label>
<input placeholder=" ">
<span>Placeholder Text</span>
</label>answered Dec 27 '18 at 15:20
Mordecai
53112
Thank you so much, Mordecai. This is perfect!
– Varun Gupta
Dec 27 '18 at 15:30
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Varun Gupta is a new contributor. Be nice, and check out our Code of Conduct.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53946974%2fhow-to-create-a-dynamic-placeholder-for-a-login-page%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
first of all, welcome to StackOverflow!
It's called "floating labels", and it can be achieved by using CSS alone (which can turn out to be a little hard if you are not really familiar with pseudo-selectors like :focus and :empty) or by using a little of JS, which may be a little easier.
You can take a look at some examples here: https://css-tricks.com/float-labels-css/
answered Dec 27 '18 at 15:03
Renan Souza
380114
Thanks a lot, Renan! Those examples gave me a fair idea how "floating labels" work. I tried looking into the source of GMail's login page but it became too confusing to figure out because of all the randomly named classes and field names. This was much better to understand.
– Varun Gupta
Dec 27 '18 at 15:25
No problem! Hope you can achieve a great result. Usually inspecting the code of large applications can be pretty tough.
– Renan Souza
Dec 27 '18 at 15:30
add a comment |
2
first of all, welcome to StackOverflow!
It's called "floating labels", and it can be achieved by using CSS alone (which can turn out to be a little hard if you are not really familiar with pseudo-selectors like :focus and :empty) or by using a little of JS, which may be a little easier.
You can take a look at some examples here: https://css-tricks.com/float-labels-css/
answered Dec 27 '18 at 15:03
Renan Souza
380114
Thanks a lot, Renan! Those examples gave me a fair idea how "floating labels" work. I tried looking into the source of GMail's login page but it became too confusing to figure out because of all the randomly named classes and field names. This was much better to understand.
– Varun Gupta
Dec 27 '18 at 15:25
No problem! Hope you can achieve a great result. Usually inspecting the code of large applications can be pretty tough.
– Renan Souza
Dec 27 '18 at 15:30
add a comment |
2
2
2
first of all, welcome to StackOverflow!
It's called "floating labels", and it can be achieved by using CSS alone (which can turn out to be a little hard if you are not really familiar with pseudo-selectors like :focus and :empty) or by using a little of JS, which may be a little easier.
You can take a look at some examples here: https://css-tricks.com/float-labels-css/
answered Dec 27 '18 at 15:03
Renan Souza
380114
first of all, welcome to StackOverflow!
It's called "floating labels", and it can be achieved by using CSS alone (which can turn out to be a little hard if you are not really familiar with pseudo-selectors like :focus and :empty) or by using a little of JS, which may be a little easier.
You can take a look at some examples here: https://css-tricks.com/float-labels-css/
answered Dec 27 '18 at 15:03
Renan Souza
380114
answered Dec 27 '18 at 15:03
Renan Souza
380114
answered Dec 27 '18 at 15:03
Renan Souza
380114
answered Dec 27 '18 at 15:03
Renan Souza
380114
380114
Thanks a lot, Renan! Those examples gave me a fair idea how "floating labels" work. I tried looking into the source of GMail's login page but it became too confusing to figure out because of all the randomly named classes and field names. This was much better to understand.
– Varun Gupta
Dec 27 '18 at 15:25
No problem! Hope you can achieve a great result. Usually inspecting the code of large applications can be pretty tough.
– Renan Souza
Dec 27 '18 at 15:30
add a comment |
Thanks a lot, Renan! Those examples gave me a fair idea how "floating labels" work. I tried looking into the source of GMail's login page but it became too confusing to figure out because of all the randomly named classes and field names. This was much better to understand.
– Varun Gupta
Dec 27 '18 at 15:25
No problem! Hope you can achieve a great result. Usually inspecting the code of large applications can be pretty tough.
– Renan Souza
Dec 27 '18 at 15:30
Thanks a lot, Renan! Those examples gave me a fair idea how "floating labels" work. I tried looking into the source of GMail's login page but it became too confusing to figure out because of all the randomly named classes and field names. This was much better to understand.
– Varun Gupta
Dec 27 '18 at 15:25
Thanks a lot, Renan! Those examples gave me a fair idea how "floating labels" work. I tried looking into the source of GMail's login page but it became too confusing to figure out because of all the randomly named classes and field names. This was much better to understand.
– Varun Gupta
Dec 27 '18 at 15:25
No problem! Hope you can achieve a great result. Usually inspecting the code of large applications can be pretty tough.
– Renan Souza
Dec 27 '18 at 15:30
No problem! Hope you can achieve a great result. Usually inspecting the code of large applications can be pretty tough.
– Renan Souza
Dec 27 '18 at 15:30
add a comment |
1
An easy and simple example for you:
label {
margin:20px 0;
position:relative;
display:inline-block;
}
span {
padding:10px;
pointer-events: none;
position:absolute;
left:0;
top:0;
transition: 0.2s;
transition-timing-function: ease;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
opacity:0.5;
}
input {
padding:10px;
}
input:focus + span, input:not(:placeholder-shown) + span {
opacity:1;
transform: scale(0.75) translateY(-100%) translateX(-30px);
}
/* For IE Browsers*/
input:focus + span, input:not(:-ms-input-placeholder) + span {
opacity:1;
transform: scale(0.75) translateY(-100%) translateX(-30px);
}<label>
<input placeholder=" ">
<span>Placeholder Text</span>
</label>answered Dec 27 '18 at 15:20
Mordecai
53112
Thank you so much, Mordecai. This is perfect!
– Varun Gupta
Dec 27 '18 at 15:30
add a comment |
1
An easy and simple example for you:
label {
margin:20px 0;
position:relative;
display:inline-block;
}
span {
padding:10px;
pointer-events: none;
position:absolute;
left:0;
top:0;
transition: 0.2s;
transition-timing-function: ease;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
opacity:0.5;
}
input {
padding:10px;
}
input:focus + span, input:not(:placeholder-shown) + span {
opacity:1;
transform: scale(0.75) translateY(-100%) translateX(-30px);
}
/* For IE Browsers*/
input:focus + span, input:not(:-ms-input-placeholder) + span {
opacity:1;
transform: scale(0.75) translateY(-100%) translateX(-30px);
}<label>
<input placeholder=" ">
<span>Placeholder Text</span>
</label>answered Dec 27 '18 at 15:20
Mordecai
53112
Thank you so much, Mordecai. This is perfect!
– Varun Gupta
Dec 27 '18 at 15:30
add a comment |
1
1
1
An easy and simple example for you:
label {
margin:20px 0;
position:relative;
display:inline-block;
}
span {
padding:10px;
pointer-events: none;
position:absolute;
left:0;
top:0;
transition: 0.2s;
transition-timing-function: ease;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
opacity:0.5;
}
input {
padding:10px;
}
input:focus + span, input:not(:placeholder-shown) + span {
opacity:1;
transform: scale(0.75) translateY(-100%) translateX(-30px);
}
/* For IE Browsers*/
input:focus + span, input:not(:-ms-input-placeholder) + span {
opacity:1;
transform: scale(0.75) translateY(-100%) translateX(-30px);
}<label>
<input placeholder=" ">
<span>Placeholder Text</span>
</label>answered Dec 27 '18 at 15:20
Mordecai
53112
An easy and simple example for you:
label {
margin:20px 0;
position:relative;
display:inline-block;
}
span {
padding:10px;
pointer-events: none;
position:absolute;
left:0;
top:0;
transition: 0.2s;
transition-timing-function: ease;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
opacity:0.5;
}
input {
padding:10px;
}
input:focus + span, input:not(:placeholder-shown) + span {
opacity:1;
transform: scale(0.75) translateY(-100%) translateX(-30px);
}
/* For IE Browsers*/
input:focus + span, input:not(:-ms-input-placeholder) + span {
opacity:1;
transform: scale(0.75) translateY(-100%) translateX(-30px);
}<label>
<input placeholder=" ">
<span>Placeholder Text</span>
</label>label {
margin:20px 0;
position:relative;
display:inline-block;
}
span {
padding:10px;
pointer-events: none;
position:absolute;
left:0;
top:0;
transition: 0.2s;
transition-timing-function: ease;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
opacity:0.5;
}
input {
padding:10px;
}
input:focus + span, input:not(:placeholder-shown) + span {
opacity:1;
transform: scale(0.75) translateY(-100%) translateX(-30px);
}
/* For IE Browsers*/
input:focus + span, input:not(:-ms-input-placeholder) + span {
opacity:1;
transform: scale(0.75) translateY(-100%) translateX(-30px);
}<label>
<input placeholder=" ">
<span>Placeholder Text</span>
</label>label {
margin:20px 0;
position:relative;
display:inline-block;
}
span {
padding:10px;
pointer-events: none;
position:absolute;
left:0;
top:0;
transition: 0.2s;
transition-timing-function: ease;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
opacity:0.5;
}
input {
padding:10px;
}
input:focus + span, input:not(:placeholder-shown) + span {
opacity:1;
transform: scale(0.75) translateY(-100%) translateX(-30px);
}
/* For IE Browsers*/
input:focus + span, input:not(:-ms-input-placeholder) + span {
opacity:1;
transform: scale(0.75) translateY(-100%) translateX(-30px);
}<label>
<input placeholder=" ">
<span>Placeholder Text</span>
</label>answered Dec 27 '18 at 15:20
Mordecai
53112
answered Dec 27 '18 at 15:20
Mordecai
53112
answered Dec 27 '18 at 15:20
Mordecai
53112
answered Dec 27 '18 at 15:20
Mordecai
53112
53112
Thank you so much, Mordecai. This is perfect!
– Varun Gupta
Dec 27 '18 at 15:30
add a comment |
Thank you so much, Mordecai. This is perfect!
– Varun Gupta
Dec 27 '18 at 15:30
Thank you so much, Mordecai. This is perfect!
– Varun Gupta
Dec 27 '18 at 15:30
Thank you so much, Mordecai. This is perfect!
– Varun Gupta
Dec 27 '18 at 15:30
add a comment |
Varun Gupta is a new contributor. Be nice, and check out our Code of Conduct.
draft saved
draft discarded
Varun Gupta is a new contributor. Be nice, and check out our Code of Conduct.
Varun Gupta is a new contributor. Be nice, and check out our Code of Conduct.
Varun Gupta is a new contributor. Be nice, and check out our Code of Conduct.
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53946974%2fhow-to-create-a-dynamic-placeholder-for-a-login-page%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
By the way, you're talking about an Angular Material input component. Material is an awesome Angular library that might come handy
– Nino Filiu
Dec 27 '18 at 15:08
Oh, thank you so much for that. Looks like exactly what I need.
– Varun Gupta
Dec 27 '18 at 15:28