在coze web发布端可通过「外观设置→高级设置→自定义css」注入css，需bot已启用并发布web app；支持精准选择器（如[data-testid="send-button"]）、shadow dom适配及!important覆盖高优先级内联样式。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
在扣子（Coze）中为Web发布端配置自定义CSS样式，可精准控制按钮圆角、表单间距、悬停反馈等细节，解决默认界面元素紧凑、视觉层次弱、交互反馈不明确等问题。
确认Web发布端支持自定义CSS入口
进入Bot设置 →「发布」→「Web App」→「外观设置」，向下滚动至「高级设置」区域。此处存在「自定义CSS」文本框，仅当Bot已启用「Web App」且状态为「已发布」或「草稿」时可见。【未启用Web App则该选项完全不显示】
若找不到该输入框，请先点击右上角「发布」按钮完成首次发布，再返回此页刷新。
注入全局CSS覆盖默认样式
在「自定义CSS」文本框中直接粘贴CSS规则，无需写
例如，统一所有输入框圆角与内边距：
input, textarea, select { border-radius: 8px; padding: 12px; font-size: 16px; }
注意：扣子Web端使用Shadow DOM封装部分组件（如消息气泡），因此直接写input可能无法命中聊天输入框；如需定制消息输入区，应使用更具体的属性选择器，例如[placeholder="输入消息..."]。
为按钮添加悬停动效与品牌色
方法一：用类名精准定位（推荐）
扣子Web App中所有按钮均带有data-testid属性，主发送按钮为data-testid="send-button"，重试按钮为data-testid="retry-button"。可据此编写高优先级样式：
button[data-testid="send-button"] { background-color: #2563eb !important; transition: all 0.2s ease; }
button[data-testid="send-button"]:hover { background-color: #1d4ed8 !important; transform: translateY(-1px); }
方法二：利用属性选择器批量处理
[data-testid$="-button"] { border: none; font-weight: 600; }
【务必加!important】——扣子内联样式优先级极高，不加会导致规则被忽略。
优化表单类交互组件的视觉反馈
第一步：重置默认复选框/单选框外观
扣子Web端表单控件基于原生HTML，但默认样式丑陋且无焦点反馈。需隐藏原生控件，用伪元素重建：
input[type="checkbox"] { display: none; }
input[type="checkbox"] + label::before { content: ""; display: inline-block; width: 18px; height: 18px; border: 2px solid #94a3b8; border-radius: 4px; margin-right: 8px; vertical-align: middle; }
input[type="checkbox"]:checked + label::before { background-color: #2563eb; border-color: #2563eb; }
第二步：增强焦点可访问性
为所有可聚焦元素添加清晰轮廓线，避免键盘用户迷失焦点位置：
:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
第三步：禁用态统一灰度处理
button:disabled, input:disabled { opacity: 0.6; cursor: not-allowed; }
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
