標籤：
placeholder 是HTML5中input的屬性,但該屬性並不支援除input以外的元素 但我們可以使用Css before選取器來實現完全相同的效果<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Div+placeholder</title><style>.rich{ color:balck; width:100px; height:100px; border: 1px solid red; margin: 20px 50%;}/*為空白時顯示 element attribute content*/.rich:empty:before{ content: attr(placeholder); /* element attribute*/ /*content: ‘this is content‘;*/ color:#red;}/*焦點時內容為空白*/.rich:focus:before{ content:none;}</style></head><body><div class=‘rich‘ contenteditable="true" placeholder=‘當 element 內容為空白時,我就會出現‘></div></body></html>
效果： 參考：HTML5 placeholderCSS :before 選取器線上Demo:DIV實現css placeholder效果
From WizNote
DIV實現CSS 的placeholder效果
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
