Html Ruby CSS在chrome上工作，但不'；t在FireFox上工作

我在RubyonRails上的select标记上有一些描述。对于不同的描述，它应该是不同的颜色。我通过添加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]'

---

你能试着把选项CSS块移到

select

one之外，看看效果如何（它确实对我有用）？

把它移到select之外对我不起作用。不知道为什么Firefox不接受任何CSS作为标签。

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