HTML如何设置读写样式？read-write伪类的作用是什么？

:read-write

:read-write

:read-only

<input type="text">

<textarea>

readonly

disabled

:read-write

:read-only

:read-write

:read-only

/* 针对所有可读写元素 */
:read-write {
    border: 1px solid #3498db; /* 蓝色边框 */
    background-color: #f8f8f8; /* 浅灰色背景 */
    padding: 8px;
    transition: all 0.2s ease-in-out;
}

/* 针对所有只读元素 */
:read-only {
    border: 1px dashed #ccc; /* 虚线边框 */
    background-color: #ffffff; /* 白色背景 */
    color: #666; /* 字体颜色稍浅 */
    cursor: default; /* 鼠标样式为默认，提示不可编辑 */
    padding: 8px;
}

/* 针对特定元素，比如input和textarea */
input[type="text"]:read-write,
textarea:read-write {
    /* 继承上面的样式，或者覆盖 */
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.5); /* 可写时加个阴影 */
}

/* 对于contenteditable属性的元素 */
[contenteditable="true"]:read-write {
    min-height: 100px;
    border: 1px solid #2ecc71; /* 可编辑内容区特殊边框 */
    background-color: #f0fff0;
}

[contenteditable="false"]:read-only {
    border: none;
    background-color: transparent;
    cursor: default;
}

<input>

<textarea>

contenteditable="true"

<input>

<textarea>

:read-write

:read-only

/* 默认输入框样式 */
input[type="text"], textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box; /* 确保padding和border不撑大元素 */
}

/* 可写状态下的焦点效果，这是很重要的用户反馈 */
input[type="text"]:read-write:focus,
textarea:read-write:focus {
    border-color: #007bff; /* 焦点时边框变色 */
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* 焦点时加个发光效果 */
    outline: none; /* 移除浏览器默认的焦点轮廓 */
}

/* 只读状态下的样式，让它看起来不像一个可交互的表单 */
input[type="text"]:read-only,
textarea:read-only {
    background-color: #e9ecef; /* 浅灰色背景，表示不可编辑 */
    color: #495057; /* 字体颜色 */
    border-color: #ced4da; /* 边框颜色 */
    cursor: not-allowed; /* 鼠标变为禁止符号 */
}

contenteditable="true"

/* contenteditable 元素的基础样式 */
[contenteditable="true"] {
    border: 1px solid #ccc;
    padding: 10px;
    min-height: 150px; /* 确保有足够的可视区域 */
    overflow-y: auto; /* 内容超出时滚动 */
    font-family: 'Segoe UI', sans-serif;
    line-height: 1.6;
}

/* 当contenteditable为true且可写时 */
[contenteditable="true"]:read-write {
    border-color: #28a745; /* 绿色边框，表示可编辑 */
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* 当contenteditable为false时（只读） */
[contenteditable="false"]:read-only {
    border: none; /* 移除边框 */
    background-color: #f8f9fa; /* 浅色背景，表示静态内容 */
    color: #333;
    cursor: default;
    /* 甚至可以移除padding，让它更像普通文本 */
    padding: 0;
}

:read-write

:read-only

<!-- 示例：个人资料编辑页 -->
<input type="text" value="张三" readonly> <!-- 用户名只读 -->
<input type="email" value="zhangsan@example.com"> <!-- 邮箱可编辑 -->
<textarea>这是我的个人简介，可以修改。</textarea>

:valid

:invalid

:read-write

readonly

// 假设有一个函数可以切换字段的只读状态
function toggleAddressEdit(isEditable) {
    const addressInput = document.getElementById('shippingAddress');
    if (isEditable) {
        addressInput.removeAttribute('readonly');
    } else {
        addressInput.setAttribute('readonly', 'true');
    }
}

// 某个事件触发时调用
// toggleAddressEdit(false); // 让地址变为只读
// toggleAddressEdit(true); // 让地址变为可编辑

:read-write

:focus

:focus

:read-write

input:read-write:focus,
textarea:read-write:focus {
    border-color: #0056b3;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

:hover

input:read-write:hover,
textarea:read-write:hover {
    background-color: #f5f5f5;
}

:disabled

:read-only

:disabled

:disabled

:read-only

input:disabled,
textarea:disabled {
    background-color: #e9ecef;
    color: #6c757d;
    cursor: not-allowed;
    opacity: 0.7; /* 稍微透明一点 */
}

:valid

type

pattern

:read-write

input:read-write:valid {
    border-color: #28a745; /* 有效时绿色边框 */
}

input:read-write:invalid {
    border-color: #dc3545; /* 无效时红色边框 */
}

::placeholder

input::placeholder,
textarea::placeholder {
    color: #a0a0a0;
    font-style: italic;
}