Blueprint CSS - выберите тег в рельсах

Question

В настоящее время работаю на рельсах 3.

Я внес изменения в свой файл CSS, чтобы добавить ширину 330 пикселей к размеру выпадающего меню выбора, внеся следующие изменения:

select {
   width: 330px;
{

Проблема в том, что есть еще одна страница, в которой я хочу иметь раскрывающиеся меню с использованием тега выбора, где я хочу, чтобы ширина составляла 230 пикселей. Я попытался добавить класс в тег select, но он не сработал:

select.ul-item {
   width: 230px;
{

Это страница просмотра, где я хочу, чтобы раскрывающееся меню было 230px.

<ul>
  <li><%= select_tag(:gender, options_for_select(['Male', 'Female', 'Unisex'])) %></li>
  <li><%= select_tag(:age_range, options_for_select(['Birth-12 Mos.', '12-24 Mos.', '2 Years', '3-4 Years', '5-7 Years', '8-11 Years', '12+ Years'])) %></li>
</ul>

Что я делаю не так?

ОБНОВЛЕНИЕ ОДИН

Это то, что на странице источника:

  <div class="span-6">

<ul>
  <li><select id="gender" name="gender"><option value="Male">Male</option><option value="Female">Female</option><option value="Unisex">Unisex</option></select></li>
  <li><select id="age_range" name="age_range"><option value="Birth-12 Mos.">Birth-12 Mos.</option><option value="12-24 Mos.">12-24 Mos.</option><option value="2 Years">2 Years</option><option value="3-4 Years">3-4 Years</option><option value="5-7 Years">5-7 Years</option><option value="8-11 Years">8-11 Years</option><option value="12+ Years">12+ Years</option></select></li>
</ul>

ОБНОВЛЕНИЕ ВТОРОЕ - РЕШЕНО

Как ни странно, вот что на самом деле сработало:

#gender, #age_range {width: 230px}

Я не понимаю, почему это работает без селектора, но работает. Кто знал. Спасибо за помощь в ответе.

Answer 1

Ваш селектор CSS:

select.ul-item 

ищет тег select с классом ul-item

Нет места в вашем HTML, где есть тег выбора с этим классом,Это проблема.

Answer 2

Попробуйте сделать селектор максимально мощным.

body div.span-6 ul li select#gender,
body div.span-6 ul li select#age_range {
  width: 230px;
}

Или попробуйте добавить !important к свойству width.

Answer 3

Как ни странно, что на самом деле работало так:

#gender, #age_range {width: 230px}

Я не понимаю, почему это работает без селектора, но работает. Кто знал. Спасибо за помощь в ответе.

Answer 4

Попробуйте это

select#gender, select#age_range{
  width: 230px;
}