如何更改shiny小部件的颜色

Question

参考 Shiny 小工具库，我想知道是否可以更改小工具的颜色方案？具体来说，虽然有些小工具似乎会继承 CSS 主题元素，但是一些小工具（如 sliderInput）则保留了默认的蓝色。

另外，高亮显示 Shiny 应用程序中的文本也采用蓝色。我相信有一种简单的方法可以按照同样的方式更改这个颜色？

- Jordan Mackie

---

看起来你特别提到的滑块输入小部件是使用不同的样式表进行设计的：大多数默认的闪亮小部件似乎都从bootstrap.min.css获取其主题，但滑块不是这样。如果你想改变它们，它们的CSS类是.irs-bar和.irs-bar-edge（假设你知道如何操作CSS属性）。 - Mikko Marttila

很遗憾，我不熟悉操作CSS类，您能详细说明一下吗？ - Jordan Mackie

一个好的起点是阅读这篇Shiny文章，它解释了如何在你的Shiny应用程序中包含CSS样式。对于基本的CSS语法，我发现W3Schools上的这个教程在刚开始时非常有帮助。如果你熟悉了这些资源，我的评论和下面的答案就会更加容易理解。 - Mikko Marttila

Mikko，抱歉回复晚了，但是我已经试过了（并且理解了CSS），似乎找不到我要找的.iris-bar属性。我尝试了颜色、背景颜色、底部边框颜色等，但都没有起作用。你能给予建议吗？ - Jordan Mackie

奇怪的是，据我所知，background-color 应该可以解决问题。我在答案中发布了一个短小的工作示例，看看是否有帮助。 - Mikko Marttila

Answer 1

以下是一个最简单的示例，演示如何修改Shiny滑块条的颜色：

library(shiny)

ui <- fluidPage(

  # CSS styles
  tags$style(HTML(".irs-bar {background: yellow}")),
  tags$style(HTML(".irs-bar {border-top: 1px solid green}")),
  tags$style(HTML(".irs-bar-edge {background: red}")),
  tags$style(HTML(".irs-bar-edge {border: 1px solid red}")),

  # Slider
  sliderInput("slider", "Pick a value:", value = 4, min = 1, max = 10)

)

server <- function(input, output) {}

runApp(list(ui = ui, server = server))

如果您使用支持的浏览器（例如Chrome或Firefox），可以右键单击网页并选择“检查元素”。这将打开一个查看器，显示HTML源代码和附加的样式等。这对于理解HTML元素的结构非常方便。

---

根据其他答案，您还可以在ui标签中添加此行以更改选定的高亮颜色：

tags$style(HTML("::selection {background: tomato}")),

如果您发现自己在修改许多不同的CSS样式并在ui.R中混杂着style标签的情况下，您也可以在单独的.css文件中编写CSS，并使用includeCSS函数将其包含在Shiny应用程序中-这将使您的代码更加简洁，并且您还可以从文本编辑器中获得CSS语法高亮显示的额外好处。

以下是使用外部CSS文件创建“番茄主题”的示例，基本上将滑块和选择主题颜色更改为tomato：

1. 在您的应用程序文件夹中创建一个名为tomatoTheme.css的文件：

::selection {
    background: tomato
}

::-moz-selection {
    background: tomato
}

.irs-single {background: tomato}

[class|="irs-bar"] {
    background: tomato;
    border: tomato
}

2. 使用includeCSS将CSS包含在您的UI中：

library(shiny)

ui <- fluidPage(

  # CSS styles
  includeCSS("tomatoTheme.css"),

  # Slider
  sliderInput("slider", "Pick a value:", value = 4, min = 1, max = 10)

)

server <- function(input, output) {}

runApp(list(ui = ui, server = server))

- Mikko Marttila

---

那个完美地起作用了，非常感谢。现在我想改变的是滑块上方悬停数字的背景，它也默认为 bootstrap.min.css 的蓝色。我已经浏览了 w3schools 的参考资料，但找不到应该更改哪个属性？ - Jordan Mackie

我相信悬停数字元素具有类.irs-single，因此使用.irs-single {background: tomato}应该可以起作用。 - Mikko Marttila

Answer 2

我从未使用过这个，但它似乎是基于Bootstrap构建的，因此每个项目都具有相同的元素。

.well 是灰色背景，它具有默认的背景和边框：background-color: #f5f5f5; border: 1px solid #e3e3e3;

h3 是页面上的标题，例如'Action Button,Single Checkbox'等等。

.btn-default 是基本按钮，具有以下基本样式：color: #333; background-color: #fff; border-color: #ccc;

---

至于更改突出显示的选择：

::selection {
  background: red; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: red; /* Gecko Browsers */
}

您可以使用color属性在高亮的同时更改文本颜色。

- knocked loose