0

我正在尝试覆盖我拥有的集合/下拉列表的默认 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的信息，并使用 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>

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

4

1 回答 1

1

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

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

.select {
  width: 30px;
}
于 2013-06-07T15:57:17.687 回答