Thread has been deleted
Last comment
how to select that state:
html
<div class="inputBox">
<input type="email" required name="email" id="email">
<i class="fa-solid fa-envelope"></i>
<label for="email">email address</label>
</div>
css
.login-card .form .inputBox input:not(:focus):not(:empty):invalid ~ label,
.login-card .form .inputBox input:focus ~ label {
color: #00dfc4;
border: 1px solid;
background: var(--clr-main--dark);
transform: translate(0 ,-150%);
font-size: 0.8rem;
letter-spacing: 0.1em;
border-radius: 1em;
padding:0 0.5em;
}
why this is not working, i basically want to label move up if its invalid email, but not when it's empty input
ChatGPT is useless btw
2 replies
Have you tried chatgpt 4
1 reply
it's not free as far as I know
3 replies
dude, who uses reddit?, I don't melt my brain yet
hltv is good but not interesting hours now
2 replies
bump
1 reply
yeah ppl told to do it in JS,
but I still wonder is there CSS solution
idk why struggle with only CSS, you can do this with JS easily, but I think you need to wrap that input in a form
<form>
<input type="email" required name="email" id="email">
<i class="fa-solid fa-envelope"></i>
<label for="email">email address</label>
-- and add a submit button --
<button type="submit">Click</button>
</form>
so when you click the button, the given requirements with execute, meaning the required/not valid conditions will check if true
In pure JS or frameworks there is much easier ways to do this
5 replies
4 replies
on what
label?
3 replies
2 replies
I will check later, im going to sleep now, but thank you ! 🙌 if that works of course
1 reply
Now playing
gaules
29975 viewers
Top streams
All(47)
Casters(35)
Streamers(7)
Organizers(5)
gaules
(29975)
ESL TV
(18333)
forg1
(7326)
Paragon
(2929)
CCT 2
(1920)
Aunkere
(1760)
ESL TV
(1449)
nak
(1412)
zoneR
(1389)
psp1g
(1334)
TrilluXe
(1299)
FURIOUSSS
(997)
ESL TV
(923)
del1ght
(907)
CCT
(731)
watchfulTV
(714)
Maincast
(496)
Dima
(463)
Astralis
(427)
Winline 2
(380)
Esportal
(355)
MGG
(305)
mch
(303)
interz
(262)
PLE
(257)
Jogando Junto
(205)
ESL TV (YouTube)
(196)
Troglodyta
(174)
shushan
(148)
NarodCast4
(147)
Vikingz_Odin
(140)
Winline
(132)
L&G
(114)
JoJo
(113)
Rafithrottir
(74)
WeWeR1cKa
(63)
IKLA
(67)
Maincast 2
(60)
A1 Adria League (YouTube)
(48)
BTSBrasilCSGO
(39)
gaules TV 3
(25)
Vearless
(24)
CCT (YouTube)
(24)
boostbend
(22)
BTSBrasilFPS
(16)
VelhoZennoN
(10)
PLE (YouTube)
(4)
