登录
首页 >  文章 >  前端

CSS:read-only与:read-write使用解析

时间：2025-07-22 10:36:15 364浏览 收藏

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《CSS :read-only与:read-write详解与应用》，本文主要会讲到等等知识点，希望大家一起学习进步，也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧！

:read-only 和 :read-write 是CSS伪类，用于根据元素是否可编辑应用不同样式。1. :read-only 匹配设置了 readonly 属性或 contenteditable="false" 的元素；2. :read-write 匹配未设置 readonly 或 contenteditable="true" 的元素；3. disabled 元素不匹配 :read-only，需使用 :disabled；4. 它们可用于表单切换、验证反馈和代码展示等场景；5. 注意兼容性、contenteditable 行为差异及选择器特异性问题。正确使用这些伪类能提升用户体验并简化样式管理。

CSS :read-only和:read-write伪类：控制可编辑元素

:read-only 和 :read-write 是 CSS 中非常实用的伪类，它们能让我们根据 HTML 元素是否处于可编辑状态来施加不同的样式。简单来说，就是区分那些只能看不能改的，和那些可以随意输入修改的元素，然后分别给它们“化妆”。

CSS :read-only和:read-write伪类：控制可编辑元素

要使用它们，其实逻辑非常直接。当你有一个 input 字段或者 textarea，它们默认是可写的。如果你给它们加上 readonly 属性，它们就变成了只读。而 contenteditable 属性则能让任何元素变得可编辑。 :read-only 会匹配那些用户无法编辑的元素。比如一个设置了 readonly 的 input，或者一个禁用了 contenteditable 的 div。 :read-write 则相反，它匹配那些用户可以编辑的元素。这包括没有 readonly 属性的 input 或 textarea，以及设置了 contenteditable="true" 的元素。

/* 针对只读输入框的样式 */
input:read-only {
    background-color: #f0f0f0;
    border: 1px dashed #ccc;
    cursor: not-allowed;
    color: #666;
}

/* 针对可编辑输入框的样式 */
input:read-write {
    background-color: #fff;
    border: 1px solid #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
    color: #333;
}

/* 针对可编辑的div */
[contenteditable="true"]:read-write {
    outline: 2px solid #28a745;
    padding: 8px;
    min-height: 50px;
    background-color: #fff;
}

/* 针对不可编辑的div (虽然通常不会直接用:read-only去匹配contenteditable="false"的div，但理论上可以) */
[contenteditable="false"]:read-only {
    background-color: #f9f9f9;
    border: 1px solid #eee;
    padding: 8px;
    color: #555;
}

这里需要提一下，disabled 属性和 readonly 属性是不同的。disabled 的元素既不能编辑也不能提交，而 readonly 的元素虽然不能编辑，但其值仍会随表单提交。:read-only 伪类是针对 readonly 状态的，而非 disabled。这点有时候会让人有点混淆。

CSS :read-only和:read-write伪类：控制可编辑元素

它们到底能用在哪些元素上？

这个问题问得好，因为一开始我总觉得它就只针对 input 和 textarea。但实际上，它的适用范围比我们想象的要广一些，也有些微妙的地方。

最直观的，当然是那些标准的表单元素：

CSS :read-only和:read-write伪类：控制可编辑元素
  • (除了 hidden, radio, checkbox, button 等本身就不可编辑的类型)
  • CSS JavaScript HTML

    然后CSS可以这样写：

    /* 默认只读样式 */
input:read-only, textarea:read-only {
    border: none;
    background-color: transparent;
    cursor: default;
    color: #333;
}

/* 可编辑样式 */
input:read-write, textarea:read-write {
    border: 1px solid #007bff;
    background-color: #fff;
    padding: 5px;
    cursor: text;
}

/* contenteditable的只读和可写样式 */
[contenteditable="false"]:read-only {
    border: 1px dashed #eee; /* 提示区域，但不可编辑 */
    background-color: #f9f9f9;
    padding: 5px;
}

[contenteditable="true"]:read-write {
    border: 2px solid #28a745;
    background-color: #fff;
    padding: 4px;
    min-height: 80px;
}

    JavaScript就只需要简单地切换属性：

    function toggleEditMode() {
    const userName = document.getElementById('userName');
    const userBio = document.getElementById('userBio');
    const userTags = document.getElementById('userTags');

    if (userName.readOnly) { // 当前是只读模式，切换到编辑
        userName.readOnly = false;
        userBio.readOnly = false;
        userTags.contentEditable = "true";
    } else { // 当前是编辑模式，切换到只读
        userName.readOnly = true;
        userBio.readOnly = true;
        userTags.contentEditable = "false";
    }
}

    这样，所有的样式切换都由CSS自动完成，JavaScript只负责逻辑，代码会变得非常清晰。

    另一个场景是表单验证时的视觉反馈。当某个字段因为某种原因（比如数据正在加载，或者等待服务器验证结果）暂时不可编辑时，我们可以通过设置 readonly 属性，然后用 :read-only 伪类给它一个灰色的背景或者虚线边框，明确告诉用户“这里现在不能动”。这比直接 disabled 要好，因为 disabled 通常意味着这个字段在当前情境下是完全无效的，而 readonly 只是暂时锁住。

    还有，在一些需要展示代码或者配置文件的场景，我们可能会用