Advertisement Jump to content
Sign in to follow this  

Low opacity text?

This topic is 2486 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

What's the code to make text low opacity and removed when you type something in the box. The most notable example of this would be on Facebook where it says "What's on your mind?"

Share this post

Link to post
Share on other sites
I'm going to assume html here since you're mentioning facebook, (I don't have a FB account though).

you can control the opacity of text and other elements using CSS (the opacity property) and change it using


(This is jquery, for normal Javascript it is alot more painful).

To remove the text when the user clicks the textfield you can use (also jquery)

$('#TextFieldD').focus(function() {
//You can use .FieldClass instead of #ID if you have multiple fields that you want to treat the same way.

Not however that most likely you don't really want to change the opacity of the textfield, (and you can't AFAIK change the opacity of just the text), most sites just use a greyish textcolor instead.

The defaultvalue plugin that turch linked to looks pretty good (it does the same thing but also restores the default value if you switch away from a textfield without entering any text in it)

Share this post

Link to post
Share on other sites
I assume you are talking about HTML.

The standard-ish way to do it is set the value attribute to the message you want displayed, then use javascript to clear it when the element gets focus. You can have a class that makes the text a "low opacity" color (if the bg is white, make the text lighter, if the bg is light blue, make the text light blue-er), which is removed when the element gains focus.

Note that this isn't really good for accessibility, because text-readers read the value of an input when it gains forcus, and you would be deleting the value when the input gains focus, thus the text-reader won't have anything to read.

If you use jQuery, you can use this plugin.

Edit: SimonForsman beat me to it biggrin.png

Share this post

Link to post
Share on other sites
Sign in to follow this  

  • Advertisement

Important Information

By using, you agree to our community Guidelines, Terms of Use, and Privacy Policy. is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!