CODEWITHSUNDEEP
javascripthtmlinputplaceholder
Alex
Alex

Reputation: 1309

Javascript input field placeholder alternative

I need a replacement for the <input placeholder="something" /> tag. Since I cannot style this placeholder the way I want and contrast is way out of bounds for this tag.

I am not sure how to realise this other than writing a complete script to do this. Of course if I have to. No problems. No lazyness involved. But the fact is. I'd like to keep the code fast and elegant.

I have seen a piece of code where I saw something like:

<input onblur="if($(this).input == '') $(this).text('default text');" onfocus="if($(this).text() == 'default text') $(this).text('')">

This is of course far from how it should be. But I guess you understand what I mean. If you are on-focus the default text should be gone. And on blur if no input. The default text should be shown.

Suggested is that I can use the ::placeholder pseudo class to style it. However under FireFox and Chrome these fail to work.

After a lot of searching online I found out that this selector doesn't always work as planned.

enter image description here

And my CSS :

enter image description here

That's why I am grabbing back to this legacy solution.

Upvotes: 0

Views: 413

Answers (1)

theencryptedone
theencryptedone

Reputation: 101

You can use this CSS Selector to modify placeholder

::-webkit-input-placeholder { 
text-size:3;
color:blue;
}

::placeholder {
text-size:3;
color:blue;
}

Upvotes: 2

Related Questions