Javascript 使用css将页面更改为编辑模式

我不确定现在这是否完全可行，但是我可以在点击一个没有javascript的按钮并使用css后更改页面的视图吗

我当前正在显示一个包含信息的页面，一旦用户单击“编辑”按钮，用户就可以在同一视图中进行更改，而不是转到其他页面

这是向用户显示页面的方式：

活在梦想中

我爱你，我爱你

编辑按钮

这就是用户单击编辑按钮后页面的外观：

活在梦想中

我爱你，我爱你

因此，类将被隐藏，直到单击编辑按钮，然后它们将被添加到div中

---

我能用css来完成这一点吗？如果不能，我可以用什么来代替javascript？

你能这样做吗？使用复选框可以切换到

contenteditable

模式

Codepen

问题是我不确定你如何保存它，因为我从来没有真正使用过可编辑的内容。我不确定你是否可以动态地提取这些值

输入[类型=复选框]{
位置：绝对位置；
顶部：-9999px；
左：-9999px；
}
输入[类型=复选框]：选中~div{
显示：内联；
}
.集装箱{
显示：无；
位置：绝对位置；
顶部：9px；
左：8px；
右：8px；
宽度：自动；
}
.第页{
-moz外观：textfield；
-webkit外观：textfield；
背景色：白色；
背景色：-moz字段；
边框：1px实心暗光；
边界半径：3px；
盒影：1px 1px 1px 0浅灰色镶嵌；
字体：-moz字段；
文本对齐：左对齐；
填充顶部：9px；
左侧填充：10px；
高度：25px；
}
.内容{
-moz外观：textfield多行；
-webkit外观：textarea；
背景色：白色；
边框：1px纯色灰色；
边界半径：5px；
字体：中-moz固定；
高度：128px；
溢出：自动；
填充：2px；
调整大小：两者；
位置：相对位置；
底部：12px；
}

活在梦想中

我爱你，我爱你

编辑按钮
实现梦想

我爱你，我爱你

保存按钮

Hi，看看这个答案，希望是有用的：没有javascript，比如@CarloG。只有当“：active”CSS无法修改DOM时，才能链接您。它只能用于造型。如果可以始终保留类标记，则可以在启用可编辑标志时使用

.page[contenteditable]

有条件地设置其样式added@RGraham是的，但我的保存按钮将在保存时修改内容，因为它将接触后端。我主要是想改变如何编辑页面presented@Cheshire所以你是说直到我真的要保存我可以编辑的更改。我知道在保存过程中会有所不同。

<div>living the dream</div>
<hr/>
<div>
    <p>Lorem ipsum dolor sit amet...</p>
</div>

<div>Edit button</div>

<div class="page" contenteditable>living the dream</div>
<hr/>
<div class="content" contenteditable>
    <p>Lorem ipsum dolor sit amet...</p>
</div>