将样式添加到 simple_form 集合/下拉列表答案

【问题标题】：Adding styles to simple_form collection/drop down将样式添加到 simple_form 集合/下拉列表
【发布时间】：2013-06-07 14:01:28
【问题描述】：

我正在尝试覆盖我拥有的集合/下拉列表的默认 simple_form 样式，但由于我的下拉列表占据了页面的整个宽度，因此无法调整宽度。

我已将此处提供的 css https://github.com/plataformatec/simple_form/wiki/CSS-for-simple_form 添加到我的样式表中，并添加了一个要应用于下拉列表的类。

.simple_form div.input {
  margin-bottom: 10px;
  clear: both; /* Required for Webkit, but not for Gecko */
}

.simple_form label {
  float: left;
  width: 100px;
  text-align: right;
  margin: 2px 10px;
}

div.boolean, .simple_form input {
  margin-left: 120px;
}

.simple_form input.test {
  width: 30px;
}

我使用来自 Rails simple_form label_html 和 Add a class to each select options with SimpleForm 的信息试图让它工作，但是当我的测试类被添加时，它显示为 class="select optional test"。我不清楚“选择可选”的来源以及如何删除它。

最后，生成的 HTML 看起来像，

 <div class="input select optional f_User">
   <label class="select optional" for="f_User">User</label>
     <select class="select optional test" id="f_User" name="f[User]">
       <option value=""></option>
       <option value="15">Shawn</option>
       <option value="87">Bob</option>
       <option value="88">John</option>
       <option value="89">Mary</option>
     </select>
 </div>

提前感谢您的时间和帮助。

【问题讨论】：

标签： css ruby-on-rails gem simple-form

【解决方案1】：

类 select 和 optional 似乎是由 SimpleForm 生成的，用于设置选择框的样式。查看custom wrappers 的代码，每个输入类型都有一个基于输入名称与之关联的 CSS，即选择有一个 class="select" 等。可选类似乎来自分配给特定字段，例如是否需要的字段。如果你真的想删除它们，似乎你必须修改 SimpleForm 来实现这一点，或者创建一个用你选择的 css 类包装的自定义。

也就是说，您可以覆盖“选择”类的宽度参数：

.select {
  width: 30px;
}

【讨论】：