actionButton without default CSS classes

Question

I'm using CSS to style my applications. I've found that I need to repeatedly do more work with actionButtons because they come with default CSS classes whether I want them to or not. Take a look at this example:

library(shiny)

ui <- fluidPage(
  tags$head(
    tags$style(HTML("
                    .redbutton {
                    background-color: red;
                    }
                    "))
  ),
  actionButton("button1", "Hover", class = "redbutton")
)

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

shinyApp(ui, server)

The button has the redbutton class applied, as I specified. However, the default CSS classes include on-hover and on-click behavior, changing the color of the button when hovered even though I do not desire this behavior. Can this be avoided? I'd prefer not to add specific instances of ':hover' into my css sheet for every class, just to disable the default behavior.

I_O · Accepted Answer · 2023-05-24 11:21:18Z

1

Another variant is to remove the unwanted CSS class, client-side, with javascript. Include this in your HTML head by adding it to your tags$head function:

## other server code ...
tags$head(
## other header elements,
      tags$script("
        var dropClass = 'btn-default';
        $(document).ready(function() { 
            document.getElementsByClassName(dropClass)
                .forEach(function(n){n.classList.remove(dropClass)});
        })
     ")
)

In this case, removing the 'btn-default' class should do the trick.

Note that CSS also offers a pointer-events: none declaration to prevent triggering the hover style (but also other effects like cursor-shape).

answered May 24, 2023 at 11:21

I_O

7,1812 gold badges11 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stéphane Laurent Over a year ago

Clever. I tried with dropClass="btn" and that didn't remove this class. But then I typed your code in the console and the class has been removed.

Stéphane Laurent · Accepted Answer · 2023-05-24 10:48:51Z

0

One possibility is to do a function for a basic button:

myButton <- function(id, label, class) {
  tags$button(id = id, class = paste0("action-button ", class), label)
}

But be aware that such a basic button has some CSS styles defined by the browser, and that's rather ugly. So you should define a base class for your custom buttons.

answered May 24, 2023 at 10:48

Stéphane Laurent

85.3k18 gold badges140 silver badges261 bronze badges

Collectives™ on Stack Overflow

actionButton without default CSS classes

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related