天道酬勤,学无止境

使用shinythemes 包更改单个shinywidgets 元素的CSS 样式(Changing CSS styling of single shinywidgets element using shinythemes packages)

问题

我使用shinythemes来引导的造型适用于我的应用程序,并shinyWidgets对于很多UI元素。 我更喜欢pickerInput的功能和易用性而pickerInput selectizeInput ,但我不喜欢我正在使用的主题中那个元素的样式。 是否可以仅对那个元素使用默认的闪亮样式表(即,不必像本文那样指定所有所需的 CSS 元素)? 我怀疑有一些样式元素名称或类可以使用样式选项应用,但我似乎找不到合适的...

library(shiny)
library(shinythemes)
library(shinyWidgets)

ui <- fluidPage(
  theme=shinytheme("lumen"), # <- comment out this line to see the default styling.
  selectInput("sel1", "Select Input:", choices=c("A", "B", "C")),
  selectizeInput("sel2", "Selectize Input:", choices=c("D", "E", "F"), 
    multiple=T, 
    options = list(placeholder = 'Please select an option below', 
      onInitialize = I('function() { this.setValue(""); }'))),
  pickerInput("sel3", "Picker Input:", choices=c("G", "H", "I"), 
    options=list(title="Select below"), multiple=T, 
    choicesOpt = list(subtext=c("g","h","i")))
)

server <- function(input, output, session) {}

shinyApp(ui, server)

需要明确的是,我想pickerInput看起来像selectizeInput提供的示例。 如果您注释掉主题参数,您可以看到默认样式的样子,所以我认为关键是关于 pickerInput 使用的来自 lumen bootswatch 的样式类。

任何想法都受到赞赏,一如既往。

标签

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • Changing CSS styling of single shinywidgets element using shinythemes packages
    I am using shinythemes to apply bootstrap styling to my app, and shinyWidgets for many of the UI elements. I prefer the functionality and ease of pickerInput over selectizeInput, but I don't like the styling of that one element in the theme I'm using. Is it possible to use the default shiny style sheet for just that one element (i.e., without having to specify all the desired CSS elements as in this post)? I suspect there's some style element name or class I can apply using style options, but I can't seem to find the right one... library(shiny) library(shinythemes) library(shinyWidgets) ui <-
  • 从shinyWidgets更改dropdownButton的css参数(Changing css params of a dropdownButton from shinyWidgets)
    问题 我从 ShinyWidgets 包中设计了一个简单的 dropdownButton。 不知何故,我无法更改小部件的 css 参数。 dropdownButton( icon = icon('info'), size = 'sm', right = T, up = F, width = '400px', div('my text', style = 'font-size:10px')) 我试图按照这里的链接的 css 调整来进行 Shinywidget dropdownButton CSS 标记 然而,这只改变了弹出窗口的参数。 我试图检查元素并找到 css 代码,但徒劳无功。 理想情况下,我需要更改按钮的大小、背景颜色和不透明度。 谢谢 回答1 希望这会有所帮助,参考此 SO 链接 #1,“状态”参数可让您设置自定义类(请参阅此内容)。 在 tags$style 中,您可以使用“background-color”选择背景颜色,使用“opacity”选择不透明度。 'size' 参数让你选择按钮的大小。 dropdownButton(status = "dropdownbutton", icon = icon('info'), size = "lg", right = T, up = F, width = '400px', div('my text', style =
  • 更改 Shiny `checkboxGroupInput` 中复选框的颜色(Change colour of checkboxes in Shiny `checkboxGroupInput`)
    问题 在 Shiny 中,是否可以在下面的示例中将复选框的颜色从默认的蓝色更改? library("shiny") server = function(input, output) { output$value <- renderPrint({ input$checkGroup }) } ui = fluidPage( checkboxGroupInput("checkGroup", label = h3("Checkbox group"), choices = list("Choice 1" = 1, "Choice 2" = 2, "Choice 3" = 3), selected = 1), hr(), fluidRow(column(3, verbatimTextOutput("value"))) ) runApp(list(ui = ui, server = server)) 回答1 或许在这里你可以找到答案:https://rstudio.github.io/shinythemes/ Shinythemes包可以轻松改变 Shiny 应用程序的整体外观。 例如: 另外,我建议阅读这篇关于使用 CSS 设置复选框样式的文章:如何使用 CSS 设置复选框样式? 更新:下面的答案引用了 CSS3 广泛可用之前的状态。 在现代浏览器(包括 Internet Explorer 9
  • R 闪亮:更改 checkboxGroupInput 中单个复选框的颜色(R shiny: change colour of individual check boxes in checkboxGroupInput)
    问题 我希望从 checkboxGroupInput 中的标准闪亮蓝色更改实际单个复选框的颜色。 我发现以下代码作为对这个问题的答案 Coloring the checkboxGroupInput options 这将改变字体的颜色而不是复选框本身的颜色。 library("shiny") ui <- fluidPage( checkboxGroupInput( inputId = "my_cbgi", label = "Choose Something", choiceNames = list( tags$span("A", style = "color: red;"), tags$span("B", style = "color: red;"), tags$span("C", style = "color: blue;"), tags$span("D", style = "font-weight: bold;") ), choiceValues = c("A", "B", "C", "D") ) ) server <- function(input, output) { } shinyApp(ui = ui, server = server) 有没有办法修改它以更改单个复选框的颜色? 在此先感谢您的帮助。 回答1
  • 打开时shinyWidget下拉按钮的bstooltip不会消失(bstooltip of shinyWidget dropdownbutton doesn't disappear when opened)
    问题 我正在努力在我的程序中实现 ShinyWidgets 下拉菜单,因为 A:它们看起来很棒 B:它们很容易制作。 我无法解决的问题是如何使下拉菜单打开后工具提示消息消失。 小部件按钮的源代码如下: # tooltip if (identical(tooltip, TRUE)) tooltip <- tooltipOptions(title = label) if (!is.null(tooltip) && !identical(tooltip, FALSE)) { tooltip <- lapply(tooltip, function(x) { if (identical(x, TRUE)) "true" else if (identical(x, FALSE)) "false" else x }) tooltipJs <- htmltools::tags$script( sprintf( "$('#%s').tooltip({ placement: '%s', title: '%s', html: %s, trigger: 'hover' });", inputId, tooltip$placement, tooltip$title, tooltip$html ) ) } else { tooltipJs <- "" } 我尝试了一种将延迟设置为 0 的解决方案,但它不起作用
  • 更改默认显示属性是一种好习惯吗?(Is changing default display property a good practice?)
    问题 TL; DR更改CSS中的默认display属性是一种不好的做法吗? 问题 最近,在我们的项目中,我们必须放置2个标头标签,以便它们看起来像一个。 它们具有相同的字体大小和相似的样式,因此唯一的问题是如何将一个接一个地放置。 我们对此有2个不同的想法,它讨论了更改默认display属性是否是一个好习惯。 因此,我们非常基本的代码 <div class="container"> <h1>Header:</h1> <h2>my header</h2> </div> 我们希望得到的结果是: 标头:我的标头 注意:该代码需要包含2个不同的标题,因为在移动版本中,我们希望将它们显示在单独的行中(因此保留默认display: block )。 方法1:使用display: inline 这是相当直截了当的。 块元素变为内联,因此它们位于同一行中。 这种方法的缺点是h1和h2默认显示属性都已更改。 方法2:使用float 可以使用float: left属性将H1定位在float: left 。 这种方法使默认显示属性保持不变,但是如果.container的长度不足以将两个标头都放在一行中,则将需要一些技巧。 问题 所有这些都会引出一个简单的问题:更改HTML元素的默认display属性是否是错误的做法? 是否违反标准,应尽可能避免? 还是它是我们的生计,并没有什么关系
  • 动态更改样式表路径在 IE 和 Firefox 中不起作用(Dynamically changing stylesheet path not working in IE and Firefox)
    问题 我有以下文件: <html> <head> <title></title> <link rel="css" type="text/css" href="/empty.css" title="css" /> <script type="text/javascript" src="/Prototype"></script> <script type="text/javascript"> function load_content() { var d = new Date(); new Ajax.PeriodicalUpdater('content', '/DOC?'+d.getTime(), { method: 'post', frequency: 5, onSuccess: function(transport) { for(i=0; (a = document.getElementsByTagName('link')[i]); i++) { if(a.getAttribute('rel') == 'css' && a.getAttribute("type") == 'text/css') { a.href = '/CSS?'+d.getTime(); } } } }); } </script> </head> <body> <div id="content"></div>
  • 更改 SVG 标记的颜色 - CSS?(Changing an SVG marker's color - CSS?)
    问题 我已经看到了许多使用 CSS 影响 SVG 元素样式的示例,但到目前为止都没有帮助我解决有关标记的问题。 老实说,我仍在研究两者的语法(SVG 和 CSS)。 我想定义一个标记,然后能够在不同的地方使用它,但颜色不同。 例如: <?xml version="1.0" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 180 320"> <defs> <marker class="AsteriskMarkerClass" id="AsteriskMarker" viewBox="-1 -1 2 2" stroke-width="0.1"> <line x1="0" y1="-1" x2="0" y2="1" /> <line x1="-1" y1="0" x2="1" y2="0" /> <line x1="-0.7071" y1="-0.7071" x2="0.7071" y2="0.7071" /> <line x1="-0.7071" y1="0.7071" x2="0.7071" y2="-0.7071" /> </marker> </defs>
  • Bootstrap 4 Sass - 动态改变主题(Bootstrap 4 Sass - changing theme dynamically)
    问题 sass 新手我一直在解决如何通过用户交互启用网站主题的动态变化 - 比如说一个深色和一个浅色主题。 我用作基础的模板 (coreui) 有一个 _custom.scss 文件,其中定义了各种变量 ... $navbar-bg: #fff; ... 这些变量的值需要根据用户对主题的选择动态设置,我不知道如何完成。 任何如何实现这一点的指针都将受到高度赞赏。 回答1 SASS 是一个预处理器,这意味着它本质上被编译成常规 CSS,然后发送到客户端。 如果要更改主题,则必须使用 javascript 动态加载不同的样式表。 情况1 如果您希望用户在多个预先打包的主题之间进行选择。 这可以通过多个“主题”样式表轻松完成,这些样式表导入您样式的各个部分。 首先导入不同的颜色,然后导入你的sass的主体。 例如: 主题1.sass: @import 'theme1'; @import 'base'; @import 'other'; 主题2.sass: @import 'theme2'; @import 'base'; @import 'other'; 然后在 javascript 中,您可以删除旧样式表并在用户执行任何需要更改主题的操作时添加新样式表。 例如,您可以在按钮的 onclick 中放置: document.getElementById('cssTheme')
  • 通过JavaScript更改CSS伪元素样式(Changing CSS pseudo-element styles via JavaScript [duplicate])
    问题 这个问题已经在这里有了答案: 使用javascript(或jQuery)选择和处理CSS伪元素,例如:: before和:: after (23个答案) 如何使用Javascript更新占位符颜色? (3个答案) 去年关闭。 是否可以通过JavaScript更改CSS伪元素样式? 例如,我想像这样动态设置滚动条的颜色: document.querySelector("#editor::-webkit-scrollbar-thumb:vertical").style.background = localStorage.getItem("Color"); 而且我还希望能够告诉滚动条这样隐藏: document.querySelector("#editor::-webkit-scrollbar").style.visibility = "hidden"; 但是,这两个脚本都返回: 未捕获的TypeError:无法读取null的属性“样式” 还有其他解决方法吗? 跨浏览器的互操作性并不重要,我只需要它在Webkit浏览器中即可工作。 回答1 编辑:有技术上的通过JavaScript直接更改CSS伪元素的样式,因为这个答案描述的方式,但这里提供的方法是优选的。 在JavaScript中,最接近更改伪元素样式的方法是添加和删除类,然后将伪元素与这些类一起使用。 隐藏滚动条的示例:
  • 内联CSS有什么不好的地方?(What's so bad about in-line CSS?)
    问题 当我看到网站入门代码和示例时,CSS始终位于单独的文件中,命名为“ main.css”,“ default.css”或“ Site.css”。 但是,当我编写页面代码时,经常会想将CSS与DOM元素直接插入一行,例如在图像上设置“ float:right”。 我觉得这是“错误的编码”,因为在示例中很少这样做。 我知道,如果将样式应用于多个对象,则应遵循“不要重复自己”(DRY)并将其分配给每个元素要引用的CSS类。 但是,如果我不想在另一个元素上重复CSS,为什么在编写HTML时不内联CSS? 问题:即使仅在该元素上使用内联CSS是否也被认为是不好的? 如果是这样,为什么? 示例(这不好吗?): <img src="myimage.gif" style="float:right" /> 回答1 当您想使站点看起来不同时,必须更改100行代码。 这可能不适用于您的示例,但是如果您将内联css用于类似 <div style ="font-size:larger; text-align:center; font-weight:bold"> 在每个页面上表示一个页面标题,将易于维护,因为 <div class="pageheader"> 如果pageheader是在单个样式表中定义的,那么,如果要更改页面标题在整个网站上的外观,则可以在一个位置更改css。 但是,我将成为一个异端
  • jQuery可以更改CSS样式定义吗? (不是每个元素的单个CSS)(Can jQuery change css style definition? (not individual css of each element))
    问题 我还没有看到任何文档说jQuery可以更改任何CSS定义,例如: td { padding: 0.2em 1.2em } 至 td { padding: 0.32em 2em } 但要么必须更改整个样式表,要么更改每个元素的类,或者更改每个元素的css。 可以更改样式定义吗? 回答1 可以通过DOM访问样式表,但这是我们倾向于避免的事情之一,因为IE需要大量的兼容性问题。 更好的方法通常是使用祖先的简单类更改来间接触发更改: td { padding: 0.2em 1.2em } body.changed td { padding: 0.32em 2em } 现在只需$('body').addClass('changed')和所有td s更新。 如果您确实必须修改样式表,请执行以下操作: var sheet= document.styleSheets[0]; var rules= 'cssRules' in sheet? sheet.cssRules : sheet.rules; // IE compatibility rules[0].style.padding= '0.32em 2em'; 假定所讨论的td规则是第一个样式表中的第一个规则。 如果不是这样,您可能必须通过迭代规则以寻找正确的selectorText来进行搜索。 或者只是在末尾添加一个新规则,以覆盖旧规则:
  • 检索或更改伪元素的 css 规则(Retrieving or changing css rules for pseudo elements)
    问题 编辑 2015-10-07 1624 CST 这个问题已被标记为可能重复——我发布它的原因是另一个问题的答案都没有提供我想要的所有信息,我想要一种简单而直接的方法来做到这一点。 我可以控制样式表和规则的顺序,以便我引用正确的规则。 我还想就这种方法的可行性提供反馈,因为它在未来会被打破。 查看我在下面发布的评论,了解我不接受可能重复问题的答案的其他原因。 ** 原始问题如下** 我搜索了一个这样的问题,并找到了一些解决问题的一部分,但不能同时检索和更改伪元素(如::before和::after CSS 值。 在来这里之前,我已经用 Google 搜索过网络,基本上我发现没有理想的方法可以做到这一点。 我找到了一种适用于 FF 40、IE 9 和 Chrome 45.0.2454.101 m 的方法,但我想知道我是否忽略了可能导致我的方法在某些情况下中断的东西。 我在这里和网络上的其他地方看到的关于访问或更改伪元素的 CSS 值的答案说,您不能直接访问这些项目,因为它们不是“DOM 的一部分”和“在 DOM 之外” ” 他们说改变它们的唯一方法是创建一个新规则并将其附加到现有规则以覆盖编码值。 这是演示该方法的代码段: function changeColor () { // Flip psedo element's background color var newColor
  • 绕过转换并立即更改属性(Bypassing transition and changing a property instantly)
    问题 我想绕过 CSS 转换并立即更改属性。 我尝试在更改之前将transition-duration设置为0s ,然后将transition-duration设置回其原始值: $('div').css('width', '200px').delay(1000).queue(function() { $(this).css({ transitionDuration: '0s', msTransitionDuration: '0s', mozTransitionDuration: '0s', webkitTransitionDuration: '0s', oTransitionDuration:'0s' }).css('width', '10px').css({ transitionDuration: '2s', msTransitionDuration: '2s', mozTransitionDuration: '2s', webkitTransitionDuration: '2s', oTransitionDuration:'2s' }) })​ 小提琴这显然行不通。 我知道规范没有为此定义该行为: 由于本规范没有定义计算值何时更改,因此计算值的哪些更改被认为是同时发生的,作者应该意识到在进行可能转换的更改后的一小段时间内更改任何转换属性可能会导致以下行为:不同实现之间会有所不同
  • JavaScript 创建的内联样式和 JavaScript 创建的样式表之间的性能差异(Performance difference between JavaScript created inline styles and JavaScript created stylesheets)
    问题 我想在我的 DOM 中动态设置给定选择器的所有元素的样式。 我或多或少看到了两种方式。 对于下面的示例,我将使用p元素和它的text-align属性,但我对这两种可能的方法的优缺点更感兴趣,而不是我对特定文本对齐段落的兴趣。 1.内联(每个元素)样式 var nodes = document.getElementsByTagName('p'); Array.prototype.forEach.call (nodes, function (node) { node.style.textAlign = "center"; }); 2. 样式表 var sheet = (function() { // Create the <style> tag var style = document.createElement("style"); // WebKit hack :( style.appendChild(document.createTextNode("")); // Add the <style> element to the page document.head.appendChild(style); return style.sheet; })(); sheet.insertRule("p { text-align: center; }"); 通常我会走内联样式的路线
  • 从 javascript [Firefox/XUL] 更改 CSS 类内容(Change CSS class content from javascript [Firefox/XUL])
    问题 我正在开发一个 Firefox 插件,并且在很大程度上依赖于 javascript 的一些动态更改。 有一些 UI 元素(hbox/descriptions),它们使用 CSS 类进行样式设置。 现在我希望从 javascript 更改 CSS 类定义,而不必处理元素 ID。 是否可以 ? 以前也有人问过类似的问题,但其中大多数是使用 php 生成基于 CSS 或 jquery 的更改。 这是我的场景的示例:我的 XUL : <box id="firefox-addon-box"> <description id="description-1" class="description-text"> Some description </description> <description id="description-2" class="description-text"> Some description </description> </box> 我的 CSS : .description-text { font-size: 15px; color: #fff; } 所以我希望将description-text类中的字体大小动态更改为 20px。 现在我知道我们可以使用单个 id 更改样式,使用getElementById()并更改样式。 但是在这里我希望更改一个类
  • 如何在 R Shiny 中对齐一组 checkboxGroupInput(How to align a group of checkboxGroupInput in R Shiny)
    问题 我使用下面的代码创建了一组checkboxGroupInput但它没有正确显示。 它看起来像这样: 知道如何在 Shiny 中强制正确对齐吗? 用户界面 uiOutput(outputId = "numSelector") 服务器 output$numSelector <- renderUI({ out <- checkboxGroupInput( inputId = "numSelector", label = "Select the numbers to filter on:", choices = selectRange(input$dataName), inline = TRUE ) return(out) }) 回答1 可以通过调整 div 标签来解决这个问题。 一个小例子闪亮的应用程序用于说明: library(shiny) # tweaks, a list object to set up multicols for checkboxGroupInput tweaks <- list(tags$head(tags$style(HTML(" .multicol { height: 150px; -webkit-column-count: 5; /* Chrome, Safari, Opera */ -moz-column-count: 5; /* Firefox
  • 从Java脚本更改CSS规则集(Changing a CSS rule-set from Javascript)
    问题 是否可以动态更改CSS规则集(例如,某些JS,当用户单击窗口小部件时,它将更改CSS规则集) 这个特定的CSS规则集已应用于页面上的许多元素(通过类选择器),我想在用户单击窗口小部件时对其进行修改,以使具有类的所有元素都发生变化。 回答1 可以,但是很麻烦。 有关如何执行此操作的最佳参考是以下文章:带有Javascript的Totally Pwn CSS(Web存档链接)。 我设法使其与Firefox和IE兼容- 尽管看起来它支持DOM方法,但我无法在Chrome中使用。 ricosrealm报告说它也可以在Chrome浏览器中使用。 回答2 这是基于带有Java脚本的Totally Pwn CSS的现代版本。 我希望是ES6,不要介意。 function getCSSRule(ruleName) { ruleName = ruleName.toLowerCase(); var result = null; var find = Array.prototype.find; find.call(document.styleSheets, styleSheet => { result = find.call(styleSheet.cssRules, cssRule => { return cssRule instanceof CSSStyleRule && cssRule
  • 使用CSS更改悬停时同级元素的颜色(Change color of sibling elements on hover using CSS)
    问题 在下面的HTML中,当我将鼠标悬停在<a>标记上时,我想仅使用CSS更改<h1>标记的颜色。 有没有办法做到这一点? <h1>Heading</h1> <a class="button" href="#"></a> 如果我将div包裹在其中并带有ID,该怎么办? <div id="banner"> <h1>Heading</h1> <a class="button" href="#"></a> </div> 请问有帮助吗? 回答1 没有CSS选择器可以做到这一点(甚至在CSS3中)。 CSS中的元素永远不会知道其父元素,因此您不能执行a:parent h1 (例如)。 他们也不知道自己的兄弟姐妹(在大多数情况下),因此您无法执行#container a:hover { /* do something with sibling h1 */ } 。 基本上,CSS属性只能修改元素及其子元素(它们不能访问父级或同级)。 您可以将h1包含在a ,但这也会使您的h1悬停。 您将只能使用JavaScript(jsFiddle概念验证)来实现这一目标。 这看起来像: $("a.button").hover(function() { $(this).siblings("h1").addClass("your_color_class"); }, function() { $(this)
  • 使用Java脚本更改CSS值(Changing CSS Values with Javascript)
    问题 使用javascript设置内联CSS值很容易。 如果我想更改宽度,并且我有这样的html: <div style="width: 10px"></div> 我需要做的就是: document.getElementById('id').style.width = value; 它将更改内联样式表的值。 通常这不是问题,因为内联样式会覆盖样式表。 例子: <style> #tId { width: 50%; } </style> <div id="tId"></div> 使用此Javascript: document.getElementById('tId').style.width = "30%"; 我得到以下内容: <style> #tId { width: 50%; } </style> <div id="tId" style="width: 30%";></div> 这是一个问题,因为在以下情况下,我不仅要更改内联值,而且要在设置宽度之前先查找宽度: <div id="tId"></div> 返回的值为Null,因此,如果我有Java脚本需要知道某种东西的宽度以执行一些逻辑(我将宽度增加1%,而不是特定值),则当我期望字符串“ 50%”时返回Null ”并没有真正起作用。 所以我的问题是:我的CSS样式中的值不是内联的,如何获取这些值? 给定一个ID