最近在做web端SSO工作台的项目时，我想写一个输入框，让它有input那样的效果。 通过添加placeholder属性，提供输入的字段为空时显示的提示信息。 到此为止，自己想想吧。 如果是你怎么办？
我们知道，placeholder是html5属性，它提供了一个提示信息hint，用于描述输入字段的期望值，如果输入字段为空，则显示该信息。
那么，如何将placeholder属性添加到非输入元素(如div )中？
请在实现之前向大家普及知识点
CSS3 :empty选择器
定义和使用方法
:empty选择器选择每个没有包含文本节点的子代的元素。
浏览器支持
表中的数字表示支持此属性的第一个浏览器的版本号。
CSS内容属性
定义和使用方法
content属性与：before和：after伪元素一起使用以插入生成的内容。
. p:after { content: '我使用*content*属性创建的静态字符'； }
请注意，要绝对定位伪元素：after，必须为div设置位置： relative。
说明
此属性定义了放置在元素之前或之后的生成内容。 默认情况下，这通常是内联内容，但在此内容中创建的框类型可以由属性display控制。
插入纯文本
内容：“代码云注释”或内容： none不插入内容
这是p1
这是p2
p1:after{
在内容： ' p 1后插入内容'
}
p2:after{
内容： none
}
嵌入文本符号
要在字符串两侧添加嵌套字符符号(如括号、单引号和双引号)，请使用content属性的open-quote属性值和close-quote属性值。 open-quote用于添加开始字符符号，close-quote用于添加结束字符符号。
p1{
quotes: (() ) )； /*使用元素的quotes属性输入字符符号*/
}
p1:before{
内容：开放-队列；
}
p1:after{
内容：关闭-队列；
}
p2{
quotes:''' '"； /*添加双引号必须转义*
}
p2:before{
内容：开放-队列；
}
p2:after{
内容：关闭-队列；
}
插入图像
content属性还可以直接在元素前后插入图像
p3:after{
内容： URL (图像地址)
}
内容和attr并用
如果不想将内容内容写入CSS，可以使用attr表达式从页面元素动态检索内容。
/*
div [数据线] : after {
内容： attr (数据行； /*请勿在属性名称中加上引号。 */
}
attr属性通常与自定义属性data-结合使用。 这是因为传统的其他属性也可以存储值，但通常不适合存储表示文本。
content中的字符串连接操作
此字符串连接类似于常规编程语言。
/*
div [数据线] : after {
内容： ' [ line ' attr (数据线) ] )；
}
需要用JavaScript组装字符串吗？ 可以用CSS3做这些。 感觉CSS3可以代替Javascript的一部分吗！ attr动态生成页面内容的能力真的是令人兴奋的事情。 你实际上可以用它与content合作来操作页面的许多其他元素和属性。
插入元素的属性值
content属性可以使用attr直接检索元素的属性并将其插入到相应的位置。
代码云笔记本前端博客
a:after{
内容： attr (href；
}
以上是今天向非输入元素(如div )添加placeholder属性时必须实现的知识点。 接下来，让我们来看看如何实现。
将placeholder属性方法添加到非input元素
有了上面的知识补充，在这里可以很容易粗暴地直接上代码：
. filter text : empty :3360 before {
color :灯光绿色；
内容： Attr (placeholder；
}
效果演示：
从上图可以看到，如果span输入框中的输入字段为空，则会显示我们设置的提示信息。
输入新内容时，提示信息将自动隐藏，并显示输入的内容，就像输入的placeholder属性一样。 下图：
结束语
以上是当今代码云笔记本前端技术博客为您带来的如何将placeholder属性添加到非输入元素(如div )中的方法。 虽然用简单的几行css代码实现了，但是可以重新认识有关css的知识，加深记忆。 所以，小知识点也有很大的工作，欢迎大家的信息来探讨更好的实现方法。