如何设置自定义内联编辑框的边框高亮及阴影样式？

本文共计903个文字，预计阅读时间需要4分钟。

相关主题

React 中 contentEditable 元素如何加 focus 边框和阴影

直接给 contenteditable 元素加 :focus 样式是无效的——它不触发原生 focus 状态。必须用 javascript 监听 focusin / focusout 事件，手动切换 class。

• 别写 div[contenteditable]:focus { outline: 2px solid blue; }，这不会生效
• 推荐监听 focusin（冒泡版），比 focus 更可靠，能捕获子元素聚焦
• 加 class 时用 transition: box-shadow 0.15s, border-color 0.15s 让高亮更自然
• 注意：Safari 对 contentEditable 的 focus 行为有延迟，建议加 tabIndex={0} 显式声明可聚焦

Vue 3 的 v-model + 内联编辑器怎么同步样式状态

用 v-model 绑定文本时，输入框其实是虚拟的；真正在用的是 contentEditable 容器。样式状态不能靠表单控件那一套逻辑来驱动。