Is there anyway to change a text input’s value (the default text that displays) with CSS?
I’m optimizing a site for mobile and I want the text ‘search this site’ to be shortened to ‘search’.
Share
Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
Is there anyway to change a text input’s value (the default text that displays) with CSS?
I’m optimizing a site for mobile and I want the text ‘search this site’ to be shortened to ‘search’.
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
:beforeand:afterpseudo-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
placeholderattribute instead. This also doesn’t address your question, but it does sound like it might be something that could be useful to you.