javascript - 更改 selectInput 和 numericInput 框的外观/形状

标签 javascript html css r shiny

我正在尝试更改我的一些 Shiny UI 元素的外观,使它们更符合网站其余部分的美学。

具体来说,我正在寻找一种方法来移除 selectInput 框的圆边,使其看起来像这样:

Example of squared selectInput

其次,我希望制作一个类似于以下内容的 numericInput 框:

Example of plus minus numericInput

有没有简单的方法来做到这一点?我在 R 中很舒服,但不知道大量的 css 或 html。我想过在 numericInput 的两侧添加 actionButton 元素以用作加号/减号键,但还没有想出如何使它们看起来像上面那样。

是否可以合并任何样式属性或 javascript 库来实现这两件事?

最佳答案

正如 ash 评论的那样,对于第一个问题,您可以通过将 border-radius 设置为 0px 来移除舍入:

shinyApp(
  ui=fluidPage(
    tags$head(
      tags$style(".selectize-input {border-radius:0px}"),
      tags$style(".selectize-input.dropdown-active {border-radius:0px}"),
      tags$style(".selectize-dropdown {border-radius:0px}")),
    selectInput("select", "Select", 1:3)),
  server=function(input, output){})

关于javascript - 更改 selectInput 和 numericInput 框的外观/形状,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43771015/

相关文章:

javascript - 对 div 内 2 列文章中的元素应用相同的高度

html - 如何使 "transbox"全宽

html - 是否可以让 child 漂浮在垂直滚动条上?

html - 在 Polymer 完成的水平布局中垂直固定容器

javascript - 预期有一个赋值或函数调用,但在 React 中看到了表达式 no-unused-expressions 错误

javascript - 无法读取 cordova 网络插件中未定义错误的属性 'type'

javascript - Bootstrap 日期选择器 + momentJS - Firefox "Invalid date"

php - 将 PHP 变量传递给 JS 函数

javascript - 是否可以使用样式组件中的 if 语句切换 css 属性的值?

javascript - 如何配置 FCKeditor 将 HTML 符号保存为 XHTML 符号 (` ` 将是 ` ` )?