使用 rails bootstrap 和 select2 更改 collection_select 下拉菜单的颜色和样式答案

【问题标题】：Changing colors and styling of collection_select dropdown with rails bootstrap and select2 implemented使用 rails bootstrap 和 select2 更改 collection_select 下拉菜单的颜色和样式
【发布时间】：2016-04-14 16:14:21
【问题描述】：

我想更改 rails 中下拉菜单的颜色和样式，以匹配我的 Web 应用程序样式的其余部分。我正在使用 Rails、Bootstrap 和 select2，我不知道在哪里添加 css，甚至不知道如何开始访问下拉列表的不同部分，以便我可以为它们着色并使其适合应用程序的其余设计.

这是下拉菜单的实现

<%= collection_select(:id, :name, @product, :id, :name,{:include_blank => true},{class: "js-example-basic-single" }) %>

请告诉我如何完成这个项目的造型，谢谢。

【问题讨论】：

更改字体、颜色、箭头等。如何在 css 中访问这些组件？

标签： ruby-on-rails twitter-bootstrap-3 select2-rails

【解决方案1】：

我不确定您的问题是什么，所以我会尽力回答。我相信你应该将你的 CSS 添加到 app\assets\stylesheets 下的 application.css 文件中。然后，如果您想自定义所有下拉列表，您可以在 css 中使用 select 标签。这是一个例子

select {
  position: relative;
  display: inline-block;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 3px;
  border: none;
  background: #f1f1f1;
  padding: 2px;
}
    
select:hover {
  background-color: dodgerblue;
}

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

【讨论】：

【解决方案2】：

快速更新

添加以下内容对我有用...令人惊讶的是这不在引导 gem 中

select {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

【讨论】：