Question

我找不到任何方法来更改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＆amp; Safari，Rails 3.1）

那么，我怎样才能改变高度和高度Rails中select_tag中的文本样式？

Answer 1

我在Reddit上发现了这个。由u/GroceryBagHead

发布

您无法设置选择选项的样式。这些是依赖的，并由您的OS /浏览器呈现。可以用html元素替换此控件。

他发布了一个链接，该链接现在因bootstrap-select而失效。 Google搜索应该可以帮助您找到更多资源

Answer 2

我的建议是检查Rails生成的页面源。为了选择CSS文件中的元素，将更容易理解HTML结构。拥有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
}

... ETC

Answer 3

嗯，这个问题很旧，但是可以确定：

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

Answer 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标签的子元素。

样式select_tag

4 个答案: