使用 CSS 在输入框内添加文本答案

【问题标题】：Add text inside an inputbox using CSS使用 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 的浏览器以某种方式支持它但所有其他浏览器都不支持，因此它不是跨浏览器解决方案。

标签： css placeholder inputbox

【解决方案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 解决方案就是这样。也感谢您提供的信息，我不知道该规则。