更改 selectInput 和 numericInput 框的外观/形状答案

【问题标题】：Change look/shape of selectInput and numericInput boxes更改 selectInput 和 numericInput 框的外观/形状
【发布时间】：2017-05-04 06:48:51
【问题描述】：

我正在尝试改变我的一些闪亮 UI 元素的外观，以使它们更符合网站其余部分的美感。

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

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

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

我可以合并任何样式属性或 javascript 库来实现这两件事吗？

【问题讨论】：

如果没有minimal example，什么都做不了。圆边几乎可以肯定是 css border-radius，要么在样式上将其设置为 0，要么添加带有 border-radius: 0 的 css 类应该可以解决这个问题
这其实是两个问题。第一个已经有了答案。请在不同的帖子中提出这两个问题。

标签： javascript html css r shiny

【解决方案1】：

正如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){})

【讨论】：

太棒了！非常感谢@ash 和@HubertL。这很好用：我已经使用 selectize-input 调整了我的字体大小，但没有意识到还有一个边框半径选项。我认为可能有一种简单的方法可以做到这一点，而我的问题的第二部分可能更棘手/不可行。
@HubertL 你知道如何以这种方式处理来自 shinyWidgets 库的 pickerInput 吗？