用css更改文本输入的值？

有没有办法用css改变文本输入的值（显示的默认文本）？用css更改文本输入的值？

Im optomizing一个网站的手机，我希望文本'搜索这个网站'缩短为'搜索'。谢谢

来源

2011-10-06 Evans

你有没有考虑过使用Javascript功能来检测用户的浏览器改变域？ http://www.w3schools.com/js/js_browser.asp – Waltzy

@Waltzy - 不检测浏览器本身;这是不好的做法。相反，使用Modernizr等工具检测浏览器的功能;它更可靠，并为您提供更细致的控制。有少数情况下浏览器检测是必要的，因为其他技术不起作用，但这不是其中之一。 – Spudley

@Spudley欢呼声，我会铭记在心。 – Waltzy

这真的不是CSS的用途。

CSS用于设计您的内容; HTML是针对实际内容本身的。

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

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

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

顺便说一句，有点偏离主题，但如果您将输入字段值用作提示文本，您可能需要考虑查看HTML5 placeholder属性。这也不能解决你的问题，但它听起来可能是对你有用的东西。

来源

2011-10-06 09:52:17 Spudley

好吧，如果你*完全忽略了CSS的'content'属性，我想这是真的。 –

@RubenMartinezJr .:我没有忽略'content';它只适用于像'：before'这样的选择器，并且在答案中。但问题是，即使你可以做到这一点，你也不应该：将重要内容放入CSS是一种不好的做法。它混淆了CSS设计的风格和内容之间的分离，并且它对最终用户有可用性问题（例如，它不能被复制+粘贴，不会被盲人用户的屏幕阅读器读取等）。底线是'：before'和'：after'中的'content'属性只能用于现场效果，而不能用于实际的网站内容。 – Spudley

不，CSS不能更改input的value属性，或者任何元素的任何属性。

来源

2011-10-06 09:41:10 thirtydot

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

例如：

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

，将改变默认的“提交”内element:before值“投递”

来源

2013-08-03 22:59:56 Edikyutter

迟到了，但使用“内容”属性，将完成你所需要的所见在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函数更好看。

来源

2015-01-12 08:39:08

对我来说，解决办法是

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

因此CSS将是：

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

来源

2015-08-20 14:44:48 laura

-3

那么容易，只是举例键入：

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

有你，按钮把所有的投入与例如提交/ RESET/.etc值..

来源

2016-06-18 16:54:55

他不想更改颜色和字体。 –

该解决方案是有点棘手，

，但它总是为我工作。

/*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>

当网站从手机访问它会显示“搜索”，但是从桌面访问时，它会显示“搜索这个网站”。

图像预览：

Output-Desktop-view.jpg

Output-Mobile-view.jpg

来源

2018-02-17 23:31:43 Taufan

用css更改文本输入的值？

回答

相关问题