Version: latest

自定义 CSS

通过自定义 CSS，可以在不改动腾讯问卷代码的前提下调整页面样式，例如将工作台顶部导航换成企业品牌色、调整字体颜色、隐藏某些元素等。

已开启的 CSS 文件会以 <link rel="stylesheet"> 的形式插入到页面 <head> 中，并在生效范围内的所有页面加载。

默认配置 default.css

团队添加自定义域名后，系统会自动创建一条名为 default css 的配置（文件名 default.css），默认已审核通过、处于关闭状态，在列表中打开开关即可生效。

它的作用是把工作台与编辑端的顶部导航改为黑底白字，内容如下：

default.css
#root-container>div>[class^="header"],
#root-container [class^="desktopHeader"]>[class^="header"],
#root-container .site-header,
#root-container .nav.top,
#root-container .nav-breadcrumb-item {
    background-color: #000 !important;
}

#root-container .ui-message-inform .coral-icon-notification_line,
#root-container .coral-header-logo__sub-title,
#root-container .nav.top .coral-icon-logout_line,
#root-container .nav.top .coral-icon-share_line,
#root-container .nav.top .coral-icon-menu_line,
#root-container .nav.top .nav-save-time .t-icon-check-circle,
#root-container .nav.top .nav-save-time .t-button__text,
#root-container .nav-breadcrumb-item,
#root-container .nav-button-more-menu,
#root-container .nav-right-container .coral-icon-add_account_line,
#root-container .header-user .header-user-info,
#root-container .header-user .coral-icon-arrow_down_line,
#root-container .prod-docs-entry,
#root-container .prod-docs-entry .coral-icon-help_line {
    color: #fff !important;
    fill: #fff !important;
}

#root-container .global-logo .coral-header-logo__title {
    color: #fff !important;
    font-weight: bold;
}

.ua-mobile #root-container .coral-header-logo__sub-title,
.ua-mobile #root-container .coral-header-logo__title {
    color: #000 !important;
}

#root-container .survey-locales-select-pc-select .t-input {
    height: 24px;
}

#root-container .page-login-wrap .global-logo .coral-header-logo__title {
    color: #000 !important;
}

#root-container .login-locale-select .survey-locales-select-pc-select .t-input {
    height: 48px;
}

开启 default.css 后编辑端顶部导航变为黑底白字

以 default.css 为示例修改

最简单的方式是以 default.css 为模板进行修改。例如想把顶部导航换成企业品牌色 #0052D9：

在配置列表中点击 default css 的「下载」，得到 default.css；
将第 1 段中的 background-color: #000 !important; 修改为 background-color: #0052D9 !important;，其余保持不变；
点击「修改」替换文件并保存（也可以「新增JS/CSS文件」上传为一条新配置）；
替换文件后配置会自动关闭并进入「待审核」，审核通过后重新打开开关即可生效。

brand.css
#root-container>div>[class^="header"],
#root-container [class^="desktopHeader"]>[class^="header"],
#root-container .site-header,
#root-container .nav.top,
#root-container .nav-breadcrumb-item {
    background-color: #0052D9 !important;
}

/* 其余规则与 default.css 相同 */

编写建议

提高选择器优先级

腾讯问卷自身的样式可能在自定义 CSS 之后加载，在选择器优先级相同时会覆盖你的样式。建议：

选择器以 #root-container（页面根节点）开头，提高优先级；
对需要覆盖的属性加上 !important。

限定作用范围

自定义 CSS 会在生效范围内的所有页面加载，编写时应尽量让选择器只命中目标元素：

使用目标页面特有的类名作为前缀，例如登录页的 .page-login-wrap；
区分 PC 与移动端：移动端页面的 html 节点上会带有 ua-mobile 类名，可以用 .ua-mobile #root-container ... 只作用于移动端；
不要直接写 div、span、button 这类宽泛的标签选择器，以免影响其他页面。

查找元素类名

在浏览器中右键目标元素 →「检查」，即可在开发者工具中看到元素的类名。建议优先选择语义化的类名（如 nav-breadcrumb-item），避免使用带随机哈希的类名（如 header_a1b2c3），后者在腾讯问卷每次发版后都可能变化。

浏览器兼容性

腾讯问卷支持的浏览器版本为：

Edge	Firefox	Chrome	Safari
>= 84	>= 83	>= 84	>= 14.1

以下 CSS 特性在上述部分浏览器中不支持，请避免使用或提供降级写法：

特性	不支持的浏览器
`:is()`、`:where()`	Chrome / Edge 84 ~ 87
`:has()`	Chrome / Edge < 105、Firefox < 121、Safari < 15.4
`:focus-visible`	Chrome / Edge 84 ~ 85、Safari < 15.4
`inset`	Chrome / Edge 84 ~ 86
`aspect-ratio`	Chrome / Edge 84 ~ 87、Firefox < 89、Safari < 15
CSS 嵌套（Nesting）	以上所有最低版本
容器查询 `@container`	以上所有最低版本

内容限制

上传的 CSS 需经过审核，审核会拦截存在安全风险的代码，例如：

高危写法，如 @import 加载外部样式表、expression()、javascript: / vbscript: 伪协议、behavior / -moz-binding 等属性；
通过背景图等方式在答题端展示钓鱼广告、诱导扫码或诱导下载等内容；
遮挡、伪造页面原有内容误导答题者，如隐藏隐私声明、仿冒登录框。

常规的颜色、字体、布局、隐藏元素等样式调整都可以正常使用。

如需使用图片，建议优先使用 data: 格式内联。

默认配置 default.css​

以 default.css 为示例修改​

编写建议​

提高选择器优先级​

限定作用范围​

查找元素类名​

浏览器兼容性​

内容限制​