2

I would like to know how to change the style of "radioButton" and "checkboxInput" widgets with css (tag$style() ).

Any help is appreciated! Thank you!

library(shiny)

ui <- shinyUI(fluidPage(
  h3("Hi! I would like to know how to change the style of these widgets with css (tag$style)"),
  h3("I can change the style of sliders, unfortunately I cannot figure out how to do this with 'radioButtons'
     and 'checkboxInput'. I usually inspect HTML-element in my browser and look for the css style, in this case this strategy does not work."),
  br(),
  br(),
  radioButtons(inputId = "ex_radio", label = "How to change my style?",
               choices = c("I want to be red when checked", "I want to be green")),
  br(),
  br(),

  checkboxInput(inputId = "ex_checkbox", label = "I'd like to look bit different as well",
                value = TRUE),

  br(),
  br(),
  h3("Any help is appreciated :) Thank you!")
))


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

shinyApp(ui, server)
Michal Majka
  • 5,332
  • 2
  • 29
  • 40

1 Answers1

5

The text you want to change is in a <span>. You can select the first span after the radio input by using the element+element CSS selector:

tags$style("input[type='radio']:checked+span{ 
             color: red; 
             }
input[type='radio']+span{ 
   color: green; 
}")

See here for more details. If you have more than one radio button elements, you can specifically apply this CSS to one of them using the #id selector, for ex:

#ex_radio input[type='radio']:checked+span{ 
             color: red; 
             }

For the checkboxes, you can do the same thing by replacing type='radio' by type=checkbox.

NicE
  • 21,165
  • 3
  • 51
  • 68
  • Thank you for a very fast answer! :) Is there any way to change the blue colour of the buttons? (not labels) – Michal Majka Aug 28 '15 at 14:36
  • To change the color, you can look at [this post](http://stackoverflow.com/questions/4253920/how-do-i-change-the-color-of-radio-buttons), not sure it can be easily done with css though. – NicE Aug 28 '15 at 14:47