1

我找不到任何方法来更改 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 中的高度和文本样式？

4

4 回答 4

1

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

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

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

于 2018-09-09T06:45:46.290 回答
1

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

<%= select_tag :blah, options_for_select(@some_options), {:multiple => true, :style => "min-width: 200px"} %>
于 2019-04-29T13:46:49.587 回答
0

我的建议是检查 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
}

ETC...

于 2012-07-17T10:47:34.330 回答
0

我使用的解决方法是安装一个名为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 元素作为所附屏幕截图中显示的 body 标记的子元素。

于 2020-06-24T19:33:03.407 回答