单击 R Shiny 后更改操作按钮的 bg 颜色

Question

单击/按下后，我需要更改 R Shiny 中动作按钮的 bg 颜色。我可以在悬停时更改默认颜色和颜色，但在单击后更改颜色时遇到问题。当按钮未点击时 - 蓝色，在悬停 - 浅蓝色，点击后 - 绿色。寻找解决此问题的方法。

这是我的代码-

ui <- shinyUI(
dashboardPage (
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
  tags$head(tags$style(HTML("
                            .btn {
                            color:rgb(255,255,255);
                            text-align: left;
                            #border-color:rgb(0,144,197);
                            background-color:rgb(0,144,197);}

                            # #gobutton:active {
                            # background: green;
                            # }

                             .btn:hover{
                                      #border-color:rgb(232,245,251);
                            background-color: rgb(232,245,251);color:   rgb(0,144,197);font-weight: bold;
                            }
                            "))),



          actionButton("gobutton","Go"),
          bsModal("formExample", "form", "gobutton", size = "small", #    Enables Pop up Screen

          # Different Shiny Widgets

          textInput("first.name", "First Name", ""),
          textInput("last.name", "Last Name",""),
          dateInput('date',label = 'Date of Birth: yyyy-mm-dd',value = ""),
          sliderInput("age", "Age in Yrs", 0, 100, 25, ticks = FALSE),
          radioButtons("gender","Gender",choices = list("Male" = "Male",  "Female" = "Female"),selected = "Male")

   )
   )))

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

shinyApp(ui,server)

Answer 1

我可以通过在你的 CSS 代码中添加一些 CSS 来做到这一点：

ui <- shinyUI(
  dashboardPage (
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      tags$head(tags$style(HTML("
                                .btn {
                                color:rgb(255,255,255);
                                text-align: left;
                                #border-color:rgb(0,144,197);
                                background-color:rgb(0,144,197);}

                                # #gobutton:active {
                                # background: green;
                                # }

                                .btn:hover{
                                #border-color:rgb(232,245,251);
                                background-color: rgb(232,245,251);color:   rgb(0,144,197);font-weight: bold;
                                }
                                .btn:focus{
                                background-color:green;
                                }

                                "))),



      actionButton("gobutton","Go"),
      bsModal("formExample", "form", "gobutton", size = "small", #    Enables Pop up Screen

              # Different Shiny Widgets

              textInput("first.name", "First Name", ""),
              textInput("last.name", "Last Name",""),
              dateInput('date',label = 'Date of Birth: yyyy-mm-dd',value = ""),
              sliderInput("age", "Age in Yrs", 0, 100, 25, ticks = FALSE),
              radioButtons("gender","Gender",choices = list("Male" = "Male",  "Female" = "Female"),selected = "Male")

      )
      )))

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

shinyApp(ui,server)

以上似乎工作正常：

我添加的 CSS 是：

.btn:focus{
  background-color:green;
}

Answer 2

您始终可以使用shinyBS包。我可以建议在悬停时向按钮添加工具提示吗

#rm(list = ls())
library(shiny)
library(shinydashboard)
library(shinyBS)
ui <- dashboardPage(
  dashboardHeader(title = 'My Change Button Color'),
  dashboardSidebar(sidebarMenu()),
  dashboardBody(
    fluidRow(
      bsButton("button1", label = "Click Me", block = F, style="danger"),
      bsTooltip(id = "button1", title = "Button 1 Explanation", placement = "right", trigger = "hover")
    )
  )
)

server <- (function(input, output, session) {  
  observeEvent(input$button1,{                                                                                                                                 
    updateButton(session, "button1",label = "Click Me", block = F, style = "success")                                                                                                                           
  })                                                                                                                                                            
})

shinyApp(ui, server)