r - Change borders' color, length and distance from label in a shiny widget using css

Question

I have the shiny app below in which I use css to change the borders' color of the shiny widget to red and also change the length of the input and its distance from its label "Name". But despite some of the parameters I have given in css part work, those mentioned above do not. Here is what needs to be done.

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyjs)

css <- 
  "
.container {
margin: 20px;
padding: 15px;
}
#expr-container .selectize-input {
  font-size: 44px;
line-height: 44px;
color: blue;
border-color: red;
width: 300px;
}
#expr-container .selectize-dropdown {
font-size: 16px;
line-height: 22px;
}
#expr-container .selectize-dropdown-content {
max-height: 5px;
padding: 0;
}
#expr-container .selectize-dropdown-content .option {
border-bottom: 1px dotted #ccc;
}
#expr-container label{ 
display: table-cell; 
text-align: center; 
vertical-align: middle;  
}
#expr-container .form-group { 
display: table-row; 
}
"
mytitle <- paste0("Life, Death & Statins")
dbHeader <- dashboardHeaderPlus(
  titleWidth = "0px",
  tags$li(a(
    div(style="display: inline;padding: 0px 0px 0px 0px;vertical-align:top; width: 150px;", actionButton("conse", "Consent",style=" background-color: #faf0e6; border-color: #faf0e6"))
  ),
  class = "dropdown")
  
  
)

shinyApp(
  ui = dashboardPagePlus(
    header = dbHeader,
    sidebar = dashboardSidebar(width = "0px",
                               sidebarMenu(id = "sidebar", # id important for updateTabItems
                                           menuItem("Consent", tabName = "conse", icon = icon("line-chart"))
                               )           ),
    body = dashboardBody(
      useShinyjs(),
      tags$script(HTML("$('body').addClass('fixed');")),
      
      tags$head(tags$style(".skin-blue .main-header .logo { padding: 0px;}")),
      
      
      tabItems(
        tabItem("conse",
                
                  fluidRow(column(1,),column(3,
                                             
                                             tags$style(css),
                                             tags$div(id = "expr-container",textInput("name", label = ("Name"), value = ""))))
                 
                )
       
      )
      
    )
    
  ),
  server<-shinyServer(function(input, output,session) { 
    hide(selector = "body > div > header > nav > a")
    
  
  }
  )
)

Answer 1

Perhaps you are looking for this:

css <-
"
#expr-container .form-control {
  background-color: transparent;
  border: 3px solid black;
  color: blue;
}
"

mytitle <- paste0("Life, Death & Statins")
dbHeader <- dashboardHeaderPlus(
  titleWidth = "0px",
  tags$li(a(
    div(style="display: inline;padding: 0px 0px 0px 0px;vertical-align:top; width: 150px;", actionButton("conse", "Consent",style=" background-color: #faf0e6; border-color: #faf0e6"))
  ),
  class = "dropdown")
)


shinyApp(
  ui = dashboardPagePlus(
    header = dbHeader,
    sidebar = dashboardSidebar(width = "0px",
                               sidebarMenu(id = "sidebar", # id important for updateTabItems
                                           menuItem("Consent", tabName = "conse", icon = icon("line-chart"))
                               )           ),
    body = dashboardBody(
      useShinyjs(),
      tags$script(HTML("$('body').addClass('fixed');")),

      tags$head(tags$style(".skin-blue .main-header .logo { padding: 0px;}")),
      


      tabItems(
        tabItem("conse",

                fluidRow(column(2,paste("Name: ")), 
                         #column(1,), 
                         column(5, #textInput("name", label = NULL, value = "", width="100%")
                                tags$style(css),
                                tags$div(id = "expr-container", textInput("name", label = NULL, value = "", width="100%") ) 
                                ))

        )

      )

    )

  ),
  server<-shinyServer(function(input, output,session) {
    hide(selector = "body > div > header > nav > a")


  }
  )
)