在闪亮的应用程序中更改滑块输入文本的颜色答案

【问题标题】：Change the color of text of sliderInput in a shiny app在闪亮的应用程序中更改滑块输入文本的颜色
【发布时间】：2021-03-22 20:56:04
【问题描述】：

我正在尝试仅将 sliderInput() 的值 (1,2,3,...10) 的字体颜色从黑色更改为白色，但这不会发生。滑块和css文件是怎么连接的？

 ui <- fluidPage(
  tags$style(type = "text/css", "
      .irs-grid-text {font-family: 'arial'; color: white; bottom: 17px; z-index: 1;}
    "),
  sliderInput(inputId="test", label=NULL, min=1, max=10, value=5, step = 1, width='100%')
)

server <- function(input, output, session){
  
}

shinyApp(ui = ui, server=server)

【问题讨论】：

我猜你需要改变背景
它们被改成白色字体，你看不到它们，因为背景也是白色的。
试试tags$style(type = "text/css", " .irs-grid-text {font-family: 'arial'; color: white; bottom: 17px; z-index: 1;background-color: #007BA7;} "),
我在 rstudio cloud 中做这件事，但它们对我来说似乎是黑色的。检查编辑
你是对的，当在 RStudio 云中运行时，字体颜色没有被改变，看起来你的 css 被一个名为 ion.rangeSlider.css 的文件中的 css 覆盖

标签： css r shiny

【解决方案1】：

您可以在 CSS 中添加 !important 以使其正常工作，我知道这并不理想 - 也许为您的 CSS 使用外部文件可能会起作用。

library(shiny)

ui <- fluidPage(
  tags$head(
  tags$style(HTML(type = "text/css", "
      .irs-grid-text {font-family: 'arial'; color: white !important; bottom: 17px; z-index: 1; }
    "))),
  sliderInput(inputId="test", label=NULL, min=1, max=10, value=5, step = 1, width='100%')
)

server <- function(input, output, session){
  
}

shinyApp(ui = ui, server=server)

【讨论】：

【解决方案2】：

另外，您可以在 CSS 中添加 .js-irs-0 以引用您的滑块。我把红色设置为显示目的。

color = "orange"
ui <- fluidPage(
  tags$style(type = "text/css", "
     .js-irs-0 .irs-grid-text {font-family: 'arial'; color: red; bottom: 1px; z-index: 1;}
    "),
  setSliderColor(color,c(1)),
  sliderInput(inputId="test", label=NULL, min=1, max=10, value=5, step = 1, width='100%')
)

server <- function(input, output, session){
  
}

shinyApp(ui = ui, server=server)

【讨论】：