19

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'.

Improve this question
3
  • have you considered using Javascript to detect the users browser and change the fields? w3schools.com/js/js_browser.asp Commented Oct 6, 2011 at 9:46
  • 1
    @Waltzy - don't detect the browser itself; it's bad practice. Instead, detect the browser's capabilities using tools like Modernizr; it's more reliable and gives you more fine-grained control. There are a very few cases where browser detection is necessary because other techniques don't work, but this isn't one of them. Commented Oct 6, 2011 at 10:07
  • @Spudley Cheers for the heads up, I'll bear it in mind. Commented Oct 6, 2011 at 10:16

7 Answers 7

Reset to default
21

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Well, if you completely ignore the CSS content property, I suppose that's true.
@RubenMartinezJr.: I didn't ignore content; it only applies for selectors like :before and that is in the answer. But the point is that even though you can do it, you shouldn't: putting significant content into CSS is a bad practice. It muddies the separation between style and content that CSS was designed for, and it has usability issues for end users (eg it can't be copy+pasted, it doesn't get read by screen readers for blind users, etc). Bottom line is that the content property in :before and :after should only be used for spot effects, not for actual site content.
8

No, CSS cannot change the value attribute of an input, or indeed any attribute of any element.

Improve this answer

Comments

5

Late to the party but using "content" attribute, within element:before will accomplish what you need as seen in http://www.w3schools.com/cssref/tryit.asp?filename=trycss_content_string

I was able to manipulate a button content value via jQuery toggleClass, switching between the following classes:

.open_button:before{
    content:"open";
}
.close_button:before{
    content: "close";
}

I understand the qualms, but I do feel like toggleClass provides an elegance that justifies the CSS trick. Otherwise one would be using a toggle function with nested css switch functions. I personally think avoiding the nested jQuery functions is better looking.

Improve this answer

Comments

3

For me the solution was 

<button type="submit" class="mybutton" name="add">
   <span class="add">Add new</span>
</button>

therefore the css will be : 

.mybutton:hover .add:after{content="0"}
Improve this answer

Comments

2

If you want to change the value use the HTML "value" attribute;

example:

<input type="submit" value="ENVIAR">

that will change the default "submit" value to "enviar"

Improve this answer

Comments

2

This solution is little bit tricky,

but it's always work for me.

/*CSS Code*/

@media screen and (max-width: 768px) {
.showondesktop {
display: none !important; }
}

#showonmobile {
    display:none;
}
@media screen and (max-width: 767px) {
    #showonmobile {
display:block; }
}
<!--HTML Code->

<div class="showondesktop"> search this site </div>

<div id="showonmobile"> search </div>

When the website is visited from Mobile it will be displayed "search", but when visited from Desktop it will be displayed "search this site".

Image Preview:

Output-Desktop-view.jpg

Output-Mobile-view.jpg

Improve this answer

Comments

-6

so easy, just type in for example:

button {
 color: red;
 font-family: sans-serif;
}

there you are, the buttons take all the inputs with values with for example submit/reset/.etc..

Improve this answer

1 Comment

He doesn't want to change color and font.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.