Question

无论如何用css更改文本输入的值（显示的默认文本）？

我正在为一个移动网站进行优化，我希望将“搜索此网站”的文字缩短为“搜索”。谢谢

Answer 1

这不是CSS的用途。

CSS用于设计内容样式; HTML是针对实际内容的。

如果您需要在加载HTML后修改内容，那么这就是Javascript的用途。

因此，您问题的真正答案是：直接修改HTML，或使用Javascript。

您可以使用CSS做一些影响内容的事情，例如使用:before和:after在元素的前面或后面添加其他文字伪选择器，但在这种情况下不会对你有帮助，也不应该用于你所讨论的那种内容更改工作。

顺便说一下，稍微偏离主题，但如果您使用输入字段值作为提示文本，则可能需要考虑查看HTML5 placeholder属性。这也没有解决你的问题，但听起来它可能对你有用。

Answer 2

不，CSS无法更改value的{{1}}属性，或任何元素的任何属性。

Answer 3

晚会但使用“内容”属性，在element:before内将完成您所需的内容，如http://www.w3schools.com/cssref/tryit.asp?filename=trycss_content_string

中所示

我能够通过jQuery toggleClass操作按钮内容值，在以下类之间切换：

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

我理解这些疑虑，但我觉得toggleClass提供了一种优雅，证明了CSS技巧。否则，将使用具有嵌套css开关功能的切换功能。我个人认为避免嵌套的jQuery函数更好看。

Answer 4

如果要更改值，请使用HTML“value”属性;

示例：

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

将默认的“提交”值更改为“enviar”

Answer 5

对我来说，解决方案是

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

因此css将是：

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

Answer 6

这个解决方案有点棘手，

但它总是对我有用。

＆＃13;

/*CSS Code*/

@media screen and (max-width: 768px) {
.showondesktop {
display: none !important; }
}

#showonmobile {
    display:none;
}
@media screen and (max-width: 767px) {
    #showonmobile {
display:block; }
}

＆＃13;

<!--HTML Code->

<div class="showondesktop"> search this site </div>

<div id="showonmobile"> search </div>

＆＃13;

当从移动设备访问网站时，它将显示＆＃34; 搜索＆＃34;，但是当从桌面访问时，它将显示＆＃34; 搜索此网站＆＃34;

图片预览：

Output-Desktop-view.jpg

Output-Mobile-view.jpg

Answer 7

如此简单，只需输入例如：

$this->session->set_userdata('result', $result);

你有，按钮采用带有值的所有输入，例如submit / reset / .etc ..

用css更改文本输入的值？

7 个答案: