使用 css 更改文本输入的值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7672521/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change a text input's value with css?
提问by Evanss
Is there anyway to change a text input's value (the default text that displays) with css?
反正有没有用css更改文本输入的值（显示的默认文本）？
Im optomizing a site for mobile and I want the text 'search this site' to be shortened to 'search'. Thanks
我正在优化一个移动站点，我希望将“搜索此站点”文本缩短为“搜索”。谢谢
采纳答案by Spudley
That really isn't what CSS is for.
这真的不是 CSS 的用途。
CSS is for styling your content; HTML is for the actual content itself.
CSS 用于样式化您的内容；HTML 用于实际内容本身。
If you need to modify the content after the HTML has loaded, then that's what Javascript is for.
如果您需要在 HTML 加载后修改内容，那么这就是 Javascript 的用途。
So the real answer to your question is: either modify the HTML directly, or use Javascript.
所以你的问题的真正答案是：要么直接修改 HTML，要么使用 Javascript。
There are some things you cando 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.
您可以使用 CSS 做一些影响内容的事情，例如使用:before和:after伪选择器在元素的前面或后面添加额外的文本，但在这种情况下这对您没有帮助，也不应该用于您正在谈论的内容更改工作。
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.
顺便说一句，稍微偏离主题，但如果您使用输入字段值作为提示文本，您可能需要考虑查看 HTML5placeholder属性。这也没有解决您的问题，但听起来确实可能对您有用。
回答by thirtydot
No, CSS cannot change the valueattribute of an input, or indeed any attribute of any element.
不，CSS 不能更改 的value属性input，或者任何元素的任何属性。
回答by Eleanor Zimmermann
Late to the party but using "content" attribute, within element:beforewill accomplish what you need as seen in http://www.w3schools.com/cssref/tryit.asp?filename=trycss_content_string
聚会迟到但使用“内容”属性，element:before在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:
我能够通过 jQuery toggleClass 操作按钮内容值，在以下类之间切换：
.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.
我理解这些疑虑，但我确实觉得 toggleClass 提供了一种证明 CSS 技巧的优雅。否则，将使用带有嵌套 css 开关功能的切换功能。我个人认为避免嵌套的 jQuery 函数更好看。
回答by Edikyutter
If you want to change the value use the HTML "value" attribute;
如果要更改值，请使用 HTML 的“value”属性；
example:
例子：
<input type="submit" value="ENVIAR">
that will change the default "submit" value to "enviar"
这会将默认的“提交”值更改为“enviar”
回答by laura
For me the solution was
对我来说，解决方案是
<button type="submit" class="mybutton" name="add">
<span class="add">Add new</span>
</button>
therefore the css will be :
因此CSS将是：
.mybutton:hover .add:after{content="0"}
回答by Taufan
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:
图像预览：
回答by dilara ucmak
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..
你在那里，按钮接受所有带有值的输入，例如提交/重置/.等。
