如何为shinyjqui的orderInput添加第七种自定义颜色样式

你遇到的核心问题是自定义CSS样式优先级不足：orderInput生成的每个选项本质是带有btn类的Bootstrap按钮，默认的Bootstrap按钮样式优先级高于你单独定义的.grey类，导致自定义样式无法生效。

只需调整自定义CSS的选择器，提高优先级即可实现自定义颜色样式，修改后的完整代码如下：

library(shiny)
library(shinyjqui)

ui <- fluidPage(
  tags$head(
    tags$style(
      HTML(
        ".grey.btn { 
            background-color: grey; 
            color: white; 
            border-color: grey; /* 统一边框颜色，保持样式协调 */
          }"
      )
    )
  ),
  
  uiOutput("custom_orderInput")
)

server <- function(input, output, session) {
  
  output$custom_orderInput <- renderUI({
    
    tagList(
      orderInput('default', 'default', items = 1:3, item_class = 'default'),
      orderInput('primary', 'primary', items = 1:3, item_class = 'primary'),
      orderInput('success', 'success', items = 1:3, item_class = 'success'),
      orderInput('info', 'info', items = 1:3, item_class = 'info'),
      orderInput('warning', 'warning', items = 1:3, item_class = 'warning'),
      orderInput('danger', 'danger', items = 1:3, item_class = 'danger'),
      orderInput('grey', 'grey', items = 7:9, item_class = 'grey')
    )
    
  })
  
}

shinyApp(ui, server)

关键修改说明： #

• 将原CSS中的.grey改为.grey.btn，通过更具体的选择器提升样式优先级，确保能覆盖Bootstrap默认的按钮样式
• 添加border-color: grey是为了让按钮边框与背景色统一，避免出现不协调的默认边框

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