Kevin Powell - Community•13mo ago

Input label over text issue

So I find myself achieving the effect I want, as you can see with the password input, but when you write something in the email input that's not valid the label goes down to its original position, hiding the text. I've tried using :invalid pseudo element but it makes the label stay up if there's no text.

9 Replies

Jochem•13mo ago

I'm heading off so I won't be able to help, but without the code in a runnable format (as in, you click a link and see the site), no one is going to be able to help properly. at the very least you'll have to share your code, but it's much, much easier for people to help you if they can see it live in your browser in something like codepen, or even just the live hosted version on github pages or any other type of hosting

TekyoOP•13mo ago

Oh my bad, I forgot to share the repo. Here it is https://github.com/Tekyo23/Login-Page

MarkBoots•13mo ago

don't know if it'll work, but maybe try :not(:empty):invalid

TekyoOP•13mo ago

It didn't :/

MarkBoots•13mo ago

ohw, you can do it with :not(:placeholder-shown) https://codepen.io/MarkBoots/pen/yLZamqy

Mark Boots

CodePen

yLZamqy

...

TekyoOP•13mo ago

Somehow it works in de codepen but when I add that to my code it doesn't do the same. The label stays up even if there's no text in the input

MarkBoots•13mo ago

you'll have to add placeholder="" to the <input> so be sure it works, you can give it a default value and then set the opacity to 0

<input name="email" type="email" required placeholder="your email">

<input name="email" type="email" required placeholder="your email">

.input-box > input::placeholder { opacity: 0 }

.input-box > input:focus~label,
.input-box > input:not(:placeholder-shown)~label {
    border: none;
    transform: translateY(-1.8rem);
}

.input-box > input::placeholder { opacity: 0 }

.input-box > input:focus~label,
.input-box > input:not(:placeholder-shown)~label {
    border: none;
    transform: translateY(-1.8rem);
}

TekyoOP•13mo ago

Thanks man! It worked! <3

MarkBoots•13mo ago

no problem

Gaming

Programming

Input label over text issue