Ruby CSS 适用于 chrome 但不适用于 FireFox

Question

我有一些描述要显示在 Ruby on Rails 上的选择标签上。它应该以不同的颜色用于不同的描述。我通过添加 CSS 来处理这个问题。但它在 Chrome 上运行良好，但在 Firefox 上不运行。

.html.slim

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

Answer 1

您可以尝试将选项 CSS 块移到 select 之外，看看效果如何（它确实对我有用）？