r - 更改小部件的样式

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> 中。您可以选择第一个span使用 element+element 进行 radio 输入后CSS 选择器:

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

参见here更多细节。如果您有多个单选按钮元素，您可以使用 #id 专门将此 CSS 应用于其中之一。选择器，例如:

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

对于复选框，您可以通过替换 type='radio' 来执行相同的操作通过type=checkbox .