特别声明：如果您喜欢小站的内容，可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!或添加QQ：874472854(^_^)
大多数情况之下，Web 中构建 ToDo 列表都是采用 JavaScript 脚本（或 React，Vue这样的 JavaScript 框架）来构建。今天在 Codepen 上看到 @Adir 使用纯 CSS 实现了一个简单版本的 ToDo 列表效果。刚看到这个效果的时候，感到很神奇，纯CSS如何实现这样的效果？为了一探究竟，查看源码之后才发现，实现该效果主要是依赖 HTML 元素的 contenteditable 属性。那么今天就和大家一起聊聊 contenteditable 属性怎么实现 ToDo 列表效果。
纯 CSS 实现的 ToDo 列表
在上面示例中，尝试着在洋红色框中按下鼠标左键，进入可编辑状态。当输入完（或不输入）内容按下回车键（Enter）就会自动创建另一个列表项（List）。同样的，当你用删除键删除列表项的文本内容时就会删除该列表项。效果如下：
从开发者工具中可以发现，每按一次回车键（Eenter）就会新增一个div元素：
看上去还不错，但在不同的浏览器中渲染还是有所差异的：
contenteditable 属性
contenteditable 是 HTML 元素的属性，它是一个通用属性。将contenteditable属性应用于任何 HTML 元素。它的表现就像 <input> 或 <textarea> 一样，你可以编辑它。
这对于为你的用户创造了一个无缝的流畅的编辑体验是非常酷的。他们可以简单地点击元素，并立即对文本进行更新。相比而言，contenteditable 的编辑体验比直接使用标准的 <input> 或 <textarea> 来做更佳：
contenteditable 属性是一个枚举式属性，接受三个属性值：inherit、true 和 false：
inherit：表明该元素继承了其父元素的可编辑状态，它是缺失值默认值（和无效值默认值）true：表明该元素可编辑false：表明该元素不可编辑
我们可以像下面这样使用 contenteditable：
<p contenteditable="true">Element is editable</p>
<p contenteditable="false">Element is NOT editable</p>
<p contenteditable="inherit">Element inherits its parent's editable status</p>
如需转载，烦请注明出处：https://www.w3cplus.com/html5/pure-css-to-do-list-with-contenteditable.html
如果文章中有不对之处，烦请各位大神拍正。如果你觉得这篇文章对你有所帮助，打个赏，让我有更大的动力去创作。(^_^)。看完了？还不过瘾？点击向作者提问！
