首先，你的CSS在Firefox和Safari失效的核心原因是不同浏览器对原生<option>元素伪元素的支持差异，再加上代码里的一个小拼写问题，导致样式完全不生效：

问题1：浏览器对<option>伪元素的支持限制 #

Chrome比较宽松，允许开发者给<option>元素添加:before/:after伪元素，但Firefox和Safari对原生表单控件（比如<select>、<option>）的样式渲染有严格限制——伪元素这类自定义样式在这两个浏览器里根本不会被渲染到<option>上。这是浏览器原生控件的设计限制，不是你的代码写法错误。

问题2：代码里的拼写错误 #

你的选择器里写的是option.not_avalble:before，这里的类名少了一个字母i，正确的应该是option.not_available:before（注意available的拼写）。这个小错误也会导致样式无法匹配到目标元素，即使在Chrome里也可能失效，先修正这个拼写问题。

替代解决方案 #

因为原生<option>的样式限制无法绕过，建议换以下两种思路实现“标记不可用尺寸”的效果：

• 方案一：利用原生disabled属性
  给不可用的<option>添加disabled属性，浏览器会自动灰掉这个选项，并且禁止用户选择，这是完全跨浏览器兼容的写法：

  <option value="xxx" disabled class="not_available">不可用尺寸</option>
  

  你还可以配合CSS优化disabled状态的样式（虽然样式限制还是存在，但基础的颜色、透明度是可以调整的）：

  select#productSelect option.not_available:disabled {
    color: #999;
    opacity: 0.6;
  }
  

• 方案二：使用自定义下拉组件
  如果一定要实现“斜杠划掉”的视觉效果，只能放弃原生<select>，用JavaScript+HTML/CSS模拟一个下拉菜单：

  1. 用<div>或<ul>模拟下拉框的外观
  2. 把每个尺寸选项做成<li>或<div>元素
  3. 给不可用的选项添加:before伪元素实现斜杠效果，这样所有浏览器都能正常渲染
     这种方式能完全控制下拉菜单的样式，没有浏览器兼容性问题，只是需要额外的JS代码处理交互逻辑。

内容的提问来源于stack exchange，提问作者Ashish