Question

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

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

Answer 1

类Simple和Optional似乎是由SimpleForm生成的，用于设置选择框的样式。看一下custom wrappers的代码，每个输入类型都有一个基于输入名称与之关联的CSS，即选择有一个class =“select”等。可选类似乎来自分配的自定义选项到特定领域，例如是否是必需的领域。如果你真的想要删除它们，那么你似乎必须使用补丁SimpleForm来实现这一目标，或者创建一个用你选择的css类包装的自定义。

也就是说，您可以覆盖“select”类的width参数：

.select {
  width: 30px;
}

向simple_form集合/下拉列表添加样式

1 个答案: