在Shiny中如何为不同radioButton组件设置独立自定义样式?
问题原因
你设置样式不生效的核心原因是CSS选择器的匹配目标错误:
- Shiny中
radioButtons生成的DOM结构里,inputId(你这里是MPL1)是绑定给整个单选组的外层div元素的,你直接给#MPL1设置margin-right,是修改整个单选组容器的右边距,并不会作用到组内每个单选选项的样式上。 - 你之前全局生效的
.radio-inline类,才是每个内联单选选项的容器类,所以直接用这个类会匹配全应用所有内联单选按钮。
解决方法
用后代选择器指定只匹配ID为MPL1的单选组内部的.radio-inline元素即可,选择器写法为#MPL1 .radio-inline。
正确代码示例:
fluidRow( column(12, align='center', h4(tags$style(HTML("#MPL1 .radio-inline {margin-right: 200px;}"))), radioButtons("MPL1",label="", choiceNames=c("(60, 0; 12, 1)","(56, 0; 48, 1)"), choiceValues=c(0,1),selected= character(0),inline=T ) ) )
通用方案
如果要给其他单选按钮设置独立样式,只需要把选择器中#后面的ID替换为对应radioButtons的inputId即可:
- 内联单选按钮(
inline=T):选择器格式为#你的inputId .radio-inline - 非内联单选按钮(
inline=F):选择器格式为#你的inputId .radio
内容的提问来源于stack exchange,提问作者Wu Jilong
相关产品推荐
相关产品推荐

