Change a text input's value with CSS?

Is there anyway to change a text input's value (the def开发者_Python百科ault 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 :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.

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

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.

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"

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"}

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

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