Round corners and change outline of checkboxGroupButtons with css in Shiny

Question

Can someone please help me out with the correct css to style checkboxGroupButtons in a Shiny app so that they have rounded corners and no outline?

Here is an example screenshot and code below

Code:

library(shiny)
data(iris)
mychoices <- c("pick me A", 
          "pick me - a very long name here", 
          "no pick me - B", 
          "another one that is long")

## my css
CSS <- function(colors){
  template <- "
.checkboxGroupButtons div.btn-group:nth-child(%s) button {
  background: %s !important;
  color: black !important;
  padding: 5px;
  margin-bottom: 8px
}"
  paste0(
    apply(cbind(seq_along(colors), colors), 1, function(vc){
      sprintf(template, vc[1], vc[2])
    }),
    collapse = "\n"
  )
}
cols <- c("red", "blue", "yellow", "green")
mycss <- CSS(cols)


# ui <- tagList(
ui <- 
  navbarPage(
    tabPanel("Dataset description",
    ),
    tabPanel("Data",
             tags$head(tags$style(HTML(mycss))),
             sidebarLayout(
               sidebarPanel(
                 fluidRow(
                   column(3,
                          p(strong("Classes")),
                          actionButton(inputId = "selectall", label="Select/Deselect all",
                                       style='padding:12px; font-size:80%'),
                          br(), br(),
                          checkboxGroupButtons(
                            inputId = "classes",
                            choices = mychoices,
                            selected = mychoices,
                            direction = "vertical",
                            width = "100%",
                            size = "xs",
                            checkIcon = list(
                              yes = icon("ok", 
                                         lib = "glyphicon"))
                          )
                   ),
                   column(3,
                          br()
                   ),
                   column(3,
                          p(strong("Controls")),
                          br(),
                          p("Transparancy"),
                          sliderInput("trans", NULL,
                                      min = 0,  max = 1, value = .5),
                          actionButton("resetButton", "Zoom/reset plot", 
                                       style='padding:6px; font-size:80%'),
                          br(), br(),
                          actionButton("clear", "Clear selection", 
                                       style='padding:6px; font-size:80%'),
                          br(), br(),
                          actionButton("resetColours", "Reset colours", 
                                       style='padding:6px; font-size:80%'),
                          br())
                 )
               ),
               mainPanel(
                 tabsetPanel(type = "tabs",
                             tabPanel("Scatter", id = "panel1",
                                      plotOutput(outputId = "scatter")),
                             tabPanel("PCA", id = "panel2"))
               )
             ))
  )
# )

server <- function(input, output) {
  output$scatter <- renderPlot({
    plot(iris$Petal.Length, iris$Petal.Width, pch=21)
    cats <- levels(iris$Species)
    cols <- c("red", "blue", "yellow2")
    ind <- lapply(cats, function(z) which(iris$Species == z))
    for (i in seq(cats)) {
      points(iris$Petal.Length[ind[[i]]], iris$Petal.Width[ind[[i]]], 
             pch = 19, col = cols[i])
    }
  })
}

shinyApp(ui, server)

sessionInfo()
R version 4.0.0 (2020-04-24)
Platform: x86_64-apple-darwin17.0 (64-bit)
Running under: macOS Catalina 10.15.6

Matrix products: default
BLAS:   /System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libBLAS.dylib
LAPACK: /Library/Frameworks/R.framework/Versions/4.0/Resources/lib/libRlapack.dylib

locale:
[1] en_GB.UTF-8/en_GB.UTF-8/en_GB.UTF-8/C/en_GB.UTF-8/en_GB.UTF-8

attached base packages:
[1] stats4    parallel  stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
 [1] shinyjs_1.1              shinydashboardPlus_0.7.5 shinydashboard_0.7.1     shinyWidgets_0.5.3      
 [5] dendextend_1.13.4        tidyr_1.1.0              patchwork_1.0.1          ggplot2_3.3.1           
 [9] shinyhelper_0.3.2        colorspace_1.4-1         colourpicker_1.0         shinythemes_1.1.2       
[13] DT_0.13                  shiny_1.4.0.2            dplyr_1.0.0              MSnbase_2.14.2          
[17] ProtGenerics_1.20.0      S4Vectors_0.26.1         mzR_2.22.0               Rcpp_1.0.4.6            
[21] Biobase_2.48.0           BiocGenerics_0.34.0  

Answer 1

You can add rounded corners and remove the outline via:

tags$style(HTML("
              .btn.checkbtn {
                border-radius: 10px !important;
                border: none;
              }"))