Evans Evans - 4 months ago 6
CSS Question

Change a text input's value with css?

Is there anyway to change a text input's value (the default text that displays) with css?

Im optomizing a site for mobile and I want the text 'search this site' to be shortened to 'search'. Thanks


That really isn't what CSS is for.

CSS is for styling your content; HTML is for the actual content itself.

If you need to modify the content after the HTML has loaded, then that's what Javascript is for.

So the real answer to your question is: either modify the HTML directly, or use Javascript.

There are some things you can do with CSS that affect the content, such as adding additional text in-front of or behind an element using the :before and :after pseudo-selectors, but that won't help you in this case, and shouldn't be used for the kind of content change work that you're talking about.

By the way, slightly off-topic, but if you're using input field value as a prompt text, you may want to consider looking into the HTML5 placeholder attribute instead. This also doesn't address your question, but it does sound like it might be something that could be useful to you.