我试图改变我的应用程序中的小部件的默认矩形形状，所以边缘是弯曲的。我已经看过其他问题，并设法为selectizeInput做到这一点，但似乎不能为selectDateRange和value box做到这一点。
特别是，下面的代码适用于selectizeInput，但不适用于其他两个：
tags$style(".small-box {border-radius: 50px}"),
tags$style(".selectize-input {border-radius: 50px}"),
tags$style(".input-daterange {border-radius: 50px}"),我在下面添加一个完整的reprex
library(shiny)
library(tidyverse)
library(scales)
library(ggpubr)
library(corrr)
library(shinydashboard)
library(DT)
dataset<-iris%>%
mutate(week=seq(from=as.Date("2017-03-12"), to=as.Date("2020-01-22"), by = "weeks"))
ui <- fluidPage(
tags$style('.container-fluid {
background-color: Lavender;
}'),
tags$style(".small-box.bg-yellow { background-color: #FFFF00 !important; color: #000000 !important;
border-radius:50px !important:}"),
# tags$li(div(img(src = 'MMix.png', height = "75px"),tile="AAAAA",
# style = "margin-left:0px; margin-top:0px; padding-top:-50px; padding-right:-100px;"),
# class = "dropdown"),
tags$style(".small-box {border-radius: 50px}"),
#tags$style(".selectize-input {border-radius: 50px}"),
tags$style(".input-daterange {border-radius: 50px}"),
fluidRow(column(1,align='right',offset=7,
tags$style("
.small-box {
border-radius: 50px !important;
border: none;
}"),
tags$head(tags$style(HTML(".small-box {height:50px}"))),
tags$head(tags$style(HTML(".small-box {width: 0px}"))),
div(valueBoxOutput("vbox"),style="color:green;",
style="border-radius:50px"),style="background-color:#6724C6;",
style = "border-style: solid"),
column(4,align='right',style = "border-radius:50px;",
dateRangeInput("week", "Week",width="400",
end="2020-01-22", start="2017-03-12"))),
fluidRow(
column(4,
selectInput("variable1", "Variable 1:",selected="Petal.Length",
choices=names(dataset[1:4]))),
column(4,
selectInput("variable2", "Variable 2:",selected="Sepal.Length",
choices=names(dataset[1:4]))),
column(4,
selectInput("variable3", "Variable 3:",selected="Species",
choices=names(dataset[5])))),
mainPanel(width=12,
plotOutput("distPlot"),
dataTableOutput("txt"),
verbatimTextOutput("write"),
),
fluidRow(column(12,textInput("caption","Caption","Data Summary"))))
server <- function(input, output) {
output$vbox <- renderValueBox({
valueBox(
value = tags$p( round(cor(q()[,input$variable1],
q()[,input$variable2]),2), style = "font-size: 100%;"),
subtitle = NULL
# color="navy","R",
)
})
q<- reactive({
dataset%>%
filter(week>= min(input$week)&
week<=max(input$week))
})
output$distPlot <- renderPlot({
print(ggplot(q(),aes_string(input$variable1, input$variable2))+geom_smooth())
})
output$txt<-renderDataTable({
datatable(
q()[,c(input$variable1,input$variable2)],
options = list(
scrollX = TRUE,
scrollY = "250px"
)
)
})
output$write <- renderText({ input$caption })
}
shinyApp(ui = ui, server = server)
1条答案
按热度按时间wkyowqbh1#
要修改输入（或任何其他Shiny元素）中的元素，您需要确定要更改的CSS div或类。为此，您可以使用Shiny应用程序上的导航检查器（CTRL+SHIFT+I或右键单击-〉检查），然后搜索HTML和CSS代码以找到您的元素。然后，您可以直接在检查器中尝试几个修改，并将其复制粘贴到Shiny代码中。
如果你想改变页面的所有输入，你可以改变你的对象的类的CSS。如果你只想改变一个，你需要改变你的对象的CSS id。在Shiny中，大多数时候，它是inputId。
所以在这个例子中，我想改变
valueBox的边界半径。我的valueBoxid是vbox，我在HTML中搜索它的子元素来改变边界半径。它是small-box类，所以我在代码中改变#vbox .small-box的border-radius。对于日期输入，它有点棘手，因为如果你改变
form-control的边界半径（这是要改变的元素的类名），你将改变左边和右边。看看它在week1上的样子。所以你应该只修改第一个
form-control的左边，只修改右边form-control的右边。看看它在week2上的效果。直接在浏览器的检查器中修改CSS，然后将它们复制粘贴到R代码中会更容易。顺便说一句，当在这里问一个问题时，最好提供一个最小的可重复的例子，而不是太多的代码。请参阅下面的代码，这是足够的。