更改窗口小部件的樣式

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選擇，爲前。