I want the placeholder to move to the top when the textbox is on focus and also while the user is typing.
I’m not sure if this is just html/css or any javascript too.
My current css looks like this, and I have no js code yet:
input:focus::-webkit-input-placeholder {
font-size: .75em;
position: relative;
top: -15px;
transition: 0.2s ease-out;
}
input::-webkit-input-placeholder {
transition: 0.2s ease-in;
}
input[type="text"]:focus, input[type="password"]:focus {
height: 50px;
padding-bottom: 0px;
transition: 0.2s ease-in;
}
input[type="text"], input[type="password"] {
height: 50px;
transition: 0.2s ease-in;
}
It almost does the work but the placeholder disappears when I start typing. I’m using twitter-bootstrap, if that makes anything easier!
Thanks.
8
Answers
That site isn’t moving the placeholder, but placing a div (
.floating-label
) over the input, so when the input is focused the div just animates to be over the input. The key part here is usingpointer-events: none;
in the floating div, so when you click it the event goes through it to the input box behind it.You could do it like this
HTML:
CSS:
Working JSFiddle here https://jsfiddle.net/273ntk5s/2/
Modified the code from @user1846747 a little.
Only using HTML and css
if your Floating label is not working when required attribute is removed, try this: using input:not(:placeholder-shown)
You can try the below code. It only uses HTML and CSS and does not reply on Javascript or component libraries:
The solution I want to propose deals with an input with the movement of the placeholder without the need for the required attribute