Applying different CSS styles to box elements in R Shiny - css

Question

I have an app in which I would like the main_box expand/contract icon to be in black text with a white background, and then the sub_box's options box to appear in red with white letters. Additionally, I want the sub_box's options box to remain red w/ white letters, even when hovered over or clicked.
I'm able to get the sub_box css implemented correctly, but I can't figure out how to disaggregate the sub_box css from the main_box css. Can anyone tell me what I'm doing wrong?
library(shiny)
library(shinydashboard)
library(shinyWidgets)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
tags$style(HTML("
.box.box-solid > .box-header > .box-tools .btn {
background: #fd0000;
color: #ffffff;
}
")),
box(title = "main_box", collapsible = T,
box(title = "sub_box",
dropdownMenu = dropdown(label = "Options",
"Hello World!")
)
)
)
)
server <- function(input, output) { }
shinyApp(ui, server)
Current State:
Desired End State:

Answer 1

A simple way to distinguish those boxes is to provide them with an id - please see the following:
library(shiny)
library(shinyWidgets)
library(shinydashboard)
library(shinydashboardPlus)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
tags$style(
HTML(
"#subbox > .box-header > .box-tools .btn {
background: #fd0000;
color: #ffffff;
}"
)
),
shinydashboardPlus::box(
id = "mainbox",
title = "main_box",
collapsible = TRUE,
shinydashboardPlus::box(
id = "subbox",
title = "sub_box",
dropdownMenu = dropdown(label = "Options", "Hello World!")
)
)
)
)
server <- function(input, output) {}
shinyApp(ui, server)
Furthermore please make sure to address namespace issues. shinydashboard::box does not have a dropdownMenu parameter - shinydashboardPlus::box has.