Добавление стилей в коллекцию simple_form / выпадающий

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 и Добавить класс к каждому варианту выбора с помощью SimpleForm, чтобы попытаться заставить его работать, но пока мой тестовый класс добавлен, он отображается как, class="select необязательный тест". Мне неясно, откуда берется "выберите опционально" и как его удалить.

В конце концов, полученный 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

Кажется, что SimpleForm генерирует классы select и option для создания стиля в окне выбора. Взглянув на код для пользовательских оболочек, с каждым типом ввода связан CSS, связанный с ним на основе имени ввода, т. Е. Select имеет class="select" и т. Д. Необязательный класс, кажется, происходит из пользовательских параметров, назначенных конкретному поле, такое как поле является обязательным или нет. Если вы действительно хотите удалить их, вам, вероятно, придется сделать это с помощью SimpleForm, чтобы сделать это, или создать пользовательскую оболочку с выбранными вами классами CSS.

Тем не менее, вы можете перезаписать параметр ширины для класса "select":

.select {
  width: 30px;
}