如何将Quarto Shiny仪表板中radioButtons默认蓝色改为金色

你遇到的问题是Bootstrap默认样式优先级高于自定义CSS，需要使用更精确的选择器来覆盖。以下是可行的解决方案：

步骤1：使用正确的CSS选择器 #

Shiny的radioButtons基于Bootstrap构建，默认样式有更高优先级，需要添加Shiny专属的容器类来提升自定义CSS的权重。创建或修改www/my_css.css文件（注意和Quarto文档中引用的路径一致），添加以下代码：

/* 覆盖单选按钮选中时的圆圈样式 */
.shiny-input-radio input[type="radio"]:checked + label::before {
  border-color: gold !important;
  background-color: gold !important;
}

/* 可选：覆盖选中标签的文本颜色 */
.shiny-input-radio input[type="radio"]:checked + label {
  color: gold !important;
}

/* 可选：覆盖单选按钮聚焦时的轮廓，保持交互一致性 */
.shiny-input-radio input[type="radio"]:focus + label::before {
  box-shadow: 0 0 0 0.2rem rgba(255, 215, 0, 0.25) !important;
}

步骤2：确保CSS路径匹配 #

检查Quarto文档中include-before-body引用的CSS路径是否和实际文件路径一致。如果你的CSS文件命名为custom.css，需要同步修改引用路径为<link rel="stylesheet" href="www/custom.css">，或者将CSS文件重命名为my_css.css。

完整Quarto文档示例 #

---
title: "Quarto Dashboard with Radio Buttons"
format:
  html:
    theme: cosmo
runtime: shiny
execute:
  echo: false
include-before-body:
  - text: |
      <link rel="stylesheet" href="www/my_css.css">
---

```{r}
shiny::radioButtons(
  inputId = "choice",
  label = "Select an option:",
  choices = list(
    "Option A" = "A",
    "Option B" = "B",
    "Option C" = "C"
  ),
  selected = "A"
)

## 原理说明
- `.shiny-input-radio`是Shiny为radioButtons容器自动添加的类，加上这个前缀可以提升选择器优先级，覆盖Bootstrap的默认样式。
- `!important`用来强制覆盖框架自带的高优先级样式。
- 聚焦样式是可选的，用于保持单选按钮交互时的视觉反馈一致性。

内容的提问来源于stack exchange，提问作者TarJae