Adding or creating a label in input element

[javascript7]

This code works great in IE, in that when you click in it the sample email address goes away and if you click outside the input box the sample reappears.

<input type="text" size="30" name="user" placeholder="Sample@example.com">

It doesn’t work in Chrome or FF.

Is there a better solution using CSS that would work in all? I can’t seem to find one in my research.

Thank you.

[m3g4p0p]

You can hide the ::placeholder pseudo element of the focused input like

input:focus::placeholder {
  color: transparent;
}

Technically you’d need prefixes for MS browsers, but if that’s default there anyway this is of course not necessary.

[Andres_Vaquero]

Hi @javascript7,
I have just tried in FF and Chrome and it works for me… please bear in mind that if there is already a value set in the input the placeholder will not appear when you click outside or remove the focus.
I’m puzzled that you’re getting this issue because placeholder is supported in FF and Chrome.
Perhaps if you sent us a link we would be able to help you further.

All the best

[javascript7]

@m3g4p0p

input:focus::placeholder {
color: transparent;
}

That did the trick!!

Thank you for that, I appreciate it.

[javascript7]

Thank you for your reply. The comment before you did the trick.[quote=“m3g4p0p, post:2, topic:286396”]
input:focus::placeholder {
color: transparent;
}
[/quote]