Блог

У меня есть некоторое описание, которое нужно показать на теге select на Ruby on Rails. Он должен быть другого цвета для другого описания. Я справляюсь с этим, добавляя CSS. Но он хорошо работает в Chrome, но не работает в Firefox.

.html.тонкий

 select[name="invoice[budget_line_id]" id="invoice_budget_line_id"]
 - BudgetLine.all.each do |budget_line|
   - if budget_line.budget_balance>=@invoice.total_amount
     |  <option class="color-1" value="
     = budget_line.id
     | ">
     = budget_line.description
   - else
     |  <option class="color-2" value="
     = budget_line.id
     | ">
     = budget_line.description
     = '[ Insufficient budget balance]'
 

.scss

 select {
  width: 100%;
  font-size: 0.8125rem;
  padding: .38rem 1.06rem;
  border-color: #4c84ff40;
  line-height: 1.5;
  border-radius: 0.2rem;
  display: block;
  color: #495057;
  background-color: #ffffff;
  background-clip: padding-box;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  option.color-1{
    color: black;
  }
  option.color-2{
    color: red;
  }
}
 

можете ли вы попробовать переместить CSS-блоки опций за пределы select одного и посмотреть, как это работает (это сработало для меня)?