样式 select_tag答案

【问题标题】：Styling select_tag样式 select_tag
【发布时间】：2012-07-17 08:42:20
【问题描述】：

我找不到任何方法来更改 Rails select_tag 列表中的字体样式

如果我试试这个：

<%= select_tag :weight_lbs, options_for_select([['0', 0],['1', 1],['2', 2],['3', 3],['4', 4],['5', 5],['6', 6],['7', 7],['8', 8],['9', 9],['10', 10],['11', 11],['12', 12],['13', 13]]), :class => 'formfield'%>

然后我可以在我的 CSS 类中更改选择框的宽度，但我无法更改其他任何内容 - 高度、字体大小和颜色，例如，都没有影响

同样，如果我尝试在元素级别更改样式，甚至使用 Rails 文档中的示例

<%= select_tag 'testname', options_for_select(options_for_select([ "Denmark", ["USA", {:class => 'select'}], "Sweden" ]))%>

class 属性对输出没有影响（Mac 上的 Chrome 和 Safari，Rails 3.1）

那么，如何在 Rails 中更改 select_tag 中的高度和文本样式？

【问题讨论】：

标签： ruby-on-rails

【解决方案1】：

我在 Reddit 上找到了这个。由u/GroceryBagHead发布

您无法设置选择选项的样式。这些取决于您的操作系统/浏览器并呈现。不过，可以用 html 元素替换此控件。

他发布了一个名为bootstrap-select 的链接，该链接现已失效。谷歌搜索应该可以帮助您找到更多资源

【讨论】：

【解决方案2】：

好吧，这个问题很老了，但你可以：

<%= select_tag :blah, options_for_select(@some_options), {:multiple => true, :style => "min-width: 200px"} %>

【讨论】：

【解决方案3】：

我的建议是检查 Rails 生成的页面源。这将使您更容易理解 HTML 结构，以便选择 CSS 文件中的元素。有了 Rails 生成的 HTML 代码，您的问题就与 CSS 有关了。

您可以在 div 中包含您的选择，例如：

<div class="myclass">
  <%= select_tag :weight_lbs, options_for_select([['0', 0],['1', 1],['2', 2],['3', 3],['4', 4],['5', 5],['6', 6],['7', 7],['8', 8],['9', 9],['10', 10],['11', 11],['12', 12],['13', 13]])%>
</div>

所以你的 CSS：

.myclass select {
    font: # whatever you want
    ...
}

.myclass select option {
    # in case you want to style the options of a select
}

等...

【讨论】：

在我上面的第一个代码 sn-p 中，我有：class=> 'formfield'，这现在有效，但只有在 CSS 中有边框或背景元素时，在这种情况下所有其他 CSS 元素工作。如果没有边框或背景，则只有宽度元素有效。不知道为什么会这样。您对 .myclass 选择选项的建议根本不起作用，即使在 CSS 中有边框元素也是如此。不过，我认为应该。看起来很奇怪！

【解决方案4】：

我使用的解决方法是安装一个名为 select2 的 gem

gem 'select2-rails'

如果您遵循文档中的设置过程，您可以在 CSS 中轻松编辑下拉列表属性。在 Chrome 检查器中乱七八糟后，我找到了相关标签。

/* The dropdown background */
.select2-dropdown{
  background-color: #3a3a3a;
  font-size: 10px;
  font-family: sans-serif;
}

/* Individual styling of list items that are selected (previously chosen) */
.select2-results__option--selected {
  opacity: 0.9;
  background-color: #505050 !important;
}

 /* Individual styling of list items that are highlighted (mouse hover) */
.select2-results__option--highlighted {
  background-color: #e66d2d !important;
}

如果您想自己查看 Chrome Inspector，请单击“选择”表单字段并打开下拉列表。这将创建一个 span 元素作为 screenshot attached 中显示的 body 标记的子元素。

【讨论】：