使用 CSS 在输入框内添加文本
Posted
技术标签:
【中文标题】使用 CSS 在输入框内添加文本【英文标题】：Add text inside an inputbox using CSS 【发布时间】：2014-07-18 14:37:45 【问题描述】：我无法编辑 html 代码，下面的问题是否可以仅使用“CSS”代码？ 如何将文本像占位符或其他内容添加到输入框？
输入文本框代码如下：
<input id="isn_email_address" type="text" name="user" size="40" maxlenth="90">
【问题讨论】：
你为什么要cannot edit the html code？只需使用占位符！
如果只是代码是内置的，它不会显示输入框代码。我只检查上面代码中的元素。
您必须将其添加到 input 标记中。无法使用 CSS 添加文本。您只能使用 CSS 设置占位符的样式，但不能更改文本。
即使使用 content="" 也不起作用？ @rope
@RobSedgwick #isn_email_address是输入字段，输入字段只是一个空元素，伪元素（:before,@987654325 @) 只能用于容器元素，并且只能用于某些输入字段，例如checkbox、radio。在这种情况下，输入字段只是一个文本框，通常我们不能在其上使用:before。这就是@RakeshShetty 的意思，看起来基于 webkit 的浏览器以某种方式支持它但所有其他浏览器都不支持，因此它不是跨浏览器解决方案。
【参考方案1】：
您不能使用 CSS 为所有浏览器设置占位符。目前唯一支持它的浏览器是 webkit。
使用jQuery，您可以实现：Working DEMO
注意：您需要最新的 jquery 库，可以从这里下载 jQuery Library
试试这个代码：-
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type = "text/javascript">
$(document).ready(function()
$('#isn_email_address').attr("placeholder", "Type your text here");
);
</script>
</head>
【讨论】：
即使输入标签中没有占位符属性，它是否仍然适用于 webkit，是否需要更改属性？ @Rakesh Shetty 我指的是你的第一段，纯粹用 CSS 改变它，抱歉不清楚。 非常感谢@RakeshShetty，您的代码确实有效。我确实尝试过在网上搜索，也许我还不够努力。我还是个新手。 @zen 很高兴为您提供帮助【参考方案2】：如果您不想使用占位符，显然还有其他方法。我不知道单独使用 css 是否可行。但是使用 javascript 和 css 绝对可以做到。
【讨论】：
那不是答案，你应该改进你的答案 这很容易。所以至少让那个家伙搜索互联网并自己做。我已经告诉他怎么做。请允许他实现这个。我都是来帮忙的他 你不需要建议 OP 只是谷歌它。如果你有真正的答案，那么想出真正的答案。【参考方案3】：假设您不支持 IE7 及以下版本，您可以使用一些伪元素。
#isn_email_address
position: relative;
#isn_email_address:after /*could use :before if you wanted too*/
content: "Type your text here";
display: block;
#isn_email_address:focus #isn_email_address:before
display: none;
您可能需要进行一些 z-index 调整以确保您能够选择文本字段。此外，一些 css *left: /my value here/* 以确保它在正确的位置。
【讨论】：
:before 和 :after 适用于元素的内容。由于输入标签没有内容，因此:before 不适用于输入。
@KheemaPandey 好点。爆破。 JavaScript 解决方案就是这样。也感谢您提供的信息，我不知道该规则。以上是关于使用 CSS 在输入框内添加文本的主要内容，如果未能解决你的问题，请参考以下文章
下列关于windows文本框的描述不正确的是a文本框内不能添加文本框b文本框内的
winform模糊查找的功能,比如说在文本框内输入a,就会出现一个下拉菜单显示相应的a开头
NSTextField 是第一响应者，但我仍然必须在输入之前在文本框内单击