Adding styles to simple_form collection/drop down

Question

I'm attempting to override the default simple_form styles for a collection/drop down I have, but am unable to get the width to adjust as my drop down takes up the entire width of the page.

I've add the css provided here, https://github.com/plataformatec/simple_form/wiki/CSS-for-simple_form to my stylesheet and have added a class to be applied to the drop down.

.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;
}

I used the information from this, Rails simple_form label_html and Add a class to each select options with SimpleForm in attempt to get it work, but while my test class is added, it shows as, class="select optional test". I'm unclear on where the "select optional" is coming from and how to remove it.

In the end, the resulting HTML looks like,

 <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>

Thanks in advance for your time and assistance.

Julian G. Julian G. · Accepted Answer · 2013-06-07T15:57:17

The classes select and optional seem to be generated by SimpleForm to style the selection box. Taking a look at the code for custom wrappers, each input type has a CSS associated to it based on the input name, i.e. selects have a class="select" etc. The optional class seems to come from the custom options assigned to the specific field such as is the field required or not. If you truly want to remove them, it seems you'll have to monkey patch SimpleForm to achieve this or create a custom wrapped with the css classes you choose.

That said, you could overwrite the width parameter for the "select" class:

.select {
  width: 30px;
}

Adding styles to simple_form collection/drop down

1 Answers