javascript - 单击 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;
}