更改窗口小部件的样式

Question

我想知道如何使用css（tag $ style（））更改“radioButton”和“checkboxInput”窗口小部件的样式。

任何帮助表示赞赏！ 谢谢！

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) 

Answer 1

您要更改的文本位于<span>。您可以通过使用element+element CSS选择器中选择无线输入后的第一个span：

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

详情请参阅here。由type=checkbox更换type='radio'

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

对于复选框，你可以做同样的事情：如果你有一个以上的单选按钮的元素，你可以明确这个CSS应用到其中的一个使用#id选择，为前。