div 实现input 的placeholder效果

contenteditable="true"属性

1 设置div为可编纂状态，则可点击获取焦点，同时div的内容也是可以编纂的；如：

<div contenteditable="true"></div>

.dom1, .dom2, .dom3 { color: black; width: 400px; height: 30px; border: 1px solid red; margin: 20px 50%; } .dom1:empty:after, .dom2:empty:after, .dom3:empty:after { content: attr(placeholder); color: red; } .dom1:focus:after { content: none; }

html部分

<div contenteditable="true" placeholder="请输入"></div>
<div contenteditable="true" placeholder="请输入"></div>
<div contenteditable="true" placeholder="请输入"></div>  

 效果

@supports属性

@supports语规则则 @supports <条件法则> { /* 特殊样式法则 */ }
@supports中的“条件法则”可以声明一条或者几个由差此外逻辑运算符相结合的声明（好比说，非（not），或（or），与（and）等）。而且还可以使用括号来确定其操纵的优先级关系。
最简单的条件表达式是一个CSS声明，一个CSS属性名，后面加上一个属性值，属性名与属性值之前用分号离隔，好比：

(display:flex)

我们来看一个简单的例子：

@supports (display:flex) { section { display: flex } ... } 上面这段代码的意思是：如果浏览器撑持“display:flex”属性，那么在“section”元素上就运用“display:flex”样式。
@supports还可以按照差此外逻辑运算符相结合，具有差此外语规则则，接下来我们一起来细化一下@supports的语规则则，以及使用细节。
根基属性的查抄

正如前面的示例一样，你可以使用CSS的根基属性来进行查抄：

@supports (display: flex) { div { display: flex; } }

这种是@supports最根基的使用法则。

not逻辑声明——排除

@supports可以使用not逻辑声明，主要感化是，在不撑持新特性时，可以供给备用样式。换过来也可以理解，如果你的浏览器不撑持@supports条件判断中的样式，你可以通过@supports为浏览器供给一种备用样式，如：

@supports not (display: flex){ #container div{float:left;} }

上面的代码暗示的是，如果你的浏览器不撑持“display:flex”属性，那么你可以使用“float:left”来替代。

and逻辑声明——联合（与）

@supports的条件判断中也可以使用“and”逻辑声明。用来判断是否撑持多个属性。例如：

@supports (column-width: 20rem) and (column-span: all) { div { column-width: 20rem } div h2 { column-span: all } div h2 + p { margin-top: 0; } ... }

上面的代码暗示的是，如果你的浏览器同时撑持“column-width:20rem”和“column-span:all”两个条件，浏览器将会挪用下面的样式：

div { column-width: 20rem } div h2 { column-span: all } div h2 + p { margin-top: 0; } ...

反之，如果差别时撑持这两个条件，那么浏览器将不会挪用这部分样式。

注：多个and边接并不需要使用括号：

@supports (display: table-cell) and (display: list-item) and (display:run-in){ /*样式*/ } or逻辑声明——or(或)

@supports除了“not”和“and”逻辑声明之外，还可以使用“or”逻辑声明。主要用来判断浏览器是否撑持某一CSS特性。也就是说，，可以使用“or”逻辑声明，同时专声明多个条件，只要此中一个条件创立就会启用@supports中的样式：

@supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) { section { display: -webkit-flex; display: -moz-flex; display: flex; … } }

上面的例子是@supports中“or”运用场景之一。flex在opera和IE10中不需要前缀，而在其他的现代浏览器中还是需要浏览器厂商的前缀，通过上面的使得，浏览器撑持“flex”属性就会挪用下面的样式：

section { display: -webkit-flex; display: -moz-flex; display: flex; … }

上面是有关于@supports的几种语法的使用法则介绍，在使用这几种法则时，有几点需要出格注意：

“or”和“and”混用