[英]css - RShiny widgets: How to color the radioButtons() and checkboxGroupInput()?
I'm using many different checkboxGroupInput()
and radioButtons()
in my RShiny app, one code snippet looks like this:我在我的 RShiny 应用程序中使用了许多不同的
checkboxGroupInput()
和radioButtons()
,一个代码片段如下所示:
checkboxGroupInput(inputId = "maDays", label = "Select Trading Days",
choices = c("Monday", "Tuesday", "Wednesday", "Thursday",
"Friday", "Saturday", "Sunday"),
selected = c("Monday", "Tuesday", "Wednesday", "Thursday",
"Friday"),
inline = TRUE),
radioButtons(inputId = "maTimeGran", label = "Select Time Granularity",
choices = c("Hourly" = "hour", "Daily" = "day",
"Weekly" = "week"),
selected = "day")
and gives:并给出:
Now my question is: How can I change the coloring of all my selected radioButtons (button, not text) and checkmarks (not text) with a css
-tag?现在我的问题是:如何使用
css
-tag更改所有选择的单选按钮(按钮,而不是文本)和复选标记(不是文本)的颜色? My preferred color would be #007d3c
.我喜欢的颜色是
#007d3c
。
I was able to adapt the approach from https://dev.to/kallmanation/styling-a-radio-button-with-only-css-4llc to get this to work.我能够适应https://dev.to/kallmanation/styling-a-radio-button-with-only-css-4llc的方法来使其工作。 (The checkboxes have a solid fill color instead of checkmarks when selected.)
(复选框在选中时具有纯色填充颜色而不是复选标记。)
Here's the code:这是代码:
library(shiny)
ui <- fluidPage(
tags$head(
tags$style(HTML("
label > input[type='radio'] {
opacity: 0;
position: absolute;
}
label > input[type='radio'] + *::before {
content: '';
margin: 4px 0 0;
width: 13px;
height: 13px;
position: absolute;
margin-left: -20px;
border-radius: 50%;
border-style: solid;
border-width: 0.1rem;
border-color: #007d3c;
}
label > input[type='radio']:checked + *::before {
background: radial-gradient(white 0%, white 30%, #007d3c 30%, #007d3c);
border-color: #007d3c;
}
label > input[type='checkbox'] {
opacity: 0;
position: absolute;
}
label > input[type='checkbox'] + *::before {
content: '';
position: absolute;
margin: 4px 0 0;
margin-left: -20px;
align: center;
width: 13px;
height: 13px;
margin-right: 1rem;
border-radius: 0%;
border-style: solid;
border-width: 0.1rem;
border-color: #007d3c;
}
label > input[type='checkbox']:checked + *::before {
content: '';
width: 13px;
height: 13px;
background-color: #007d3c;
}
"))
),
checkboxGroupInput(inputId = "maDays", label = "Select Trading Days",
choices = c("Monday", "Tuesday", "Wednesday", "Thursday",
"Friday", "Saturday", "Sunday"),
selected = c("Monday", "Tuesday", "Wednesday", "Thursday",
"Friday"),
inline = TRUE),
radioButtons(inputId = "maTimeGran", label = "Select Time Granularity",
choices = c("Hourly" = "hour", "Daily" = "day",
"Weekly" = "week"),
selected = "day")
)
server <- function(input, output) {
## put server code here
}
shinyApp(ui = ui, server = server)
Here's my original answer, which styles the labels for checked elements, in case this is useful to anyone else:这是我的原始答案,其中 styles 是检查元素的标签,以防这对其他人有用:
library(shiny)
ui <- fluidPage(
tags$head(
tags$style(HTML("
input:checked + span {
color: #007d3c;
}
"))
),
checkboxGroupInput(inputId = "maDays", label = "Select Trading Days",
choices = c("Monday", "Tuesday", "Wednesday", "Thursday",
"Friday", "Saturday", "Sunday"),
selected = c("Monday", "Tuesday", "Wednesday", "Thursday",
"Friday"),
inline = TRUE),
radioButtons(inputId = "maTimeGran", label = "Select Time Granularity",
choices = c("Hourly" = "hour", "Daily" = "day",
"Weekly" = "week"),
selected = "day")
)
server <- function(input, output) {
## put server code here
}
shinyApp(ui = ui, server = server)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.