Change the color of a shinyalert 'OK' button (confirmButtonCol) using a css stylesheet

Question

I used the className = 'alert' attribute in shinyalert() so that I could format my shinyalerts in a CSS stylesheet. I can change the text and background color of the whole modal (eg tags$style('.alert {background-color: blue}')), so I know that setting a class name is working. I am trying to change the color of the 'OK' button, but I don't know what property to use. I know that I can set the button color using confirmButtonCol in the call to shinyalert(), but I would like to do it with a stylesheet if possible.

My code would look like this:

ui <- fluidPage(
  tags$style('.alert {*SOME_PROPERTY*: #2874A6;}'),
  actionButton('showalert', 'Show Alert'),
  shinyalert::useShinyalert()
)
server <- function(input, output, session) {
  observeEvent(input$showalert, {
     shinyalert::shinyalert(title = 'Alert', className = 'alert')
    })
}
shinyApp(ui = ui, server = server)

I am wondering what I can replace SOME_PROPERTY with, if anything.

Thank you in advance!

score 3 · Accepted Answer · answered Sep 08 '21 at 20:49

So the OK button is actually with a class name of confirm. When you select it with CSS, just add it after your class name like .alert .confirm {...}. Also, it turns out the button color uses in-line style, which has the highest priority in all CSS rules, so we need to forcibly overwrite it with !important.

code

library(shiny)
ui <- fluidPage(
    tags$style('.alert .confirm {background-color: #2874A6 !important;}'),
    actionButton('showalert', 'Show Alert'),
    shinyalert::useShinyalert()
)
server <- function(input, output, session) {
    observeEvent(input$showalert, {
        shinyalert::shinyalert(title = 'Alert', className = 'alert')
    })
}
shinyApp(ui = ui, server = server)

Change the color of a shinyalert 'OK' button (confirmButtonCol) using a css stylesheet

1 Answers1