如何在下拉列表中添加分隔符？

<select>
  <optgroup label="水果">
    <option>苹果</option>
    <option>香蕉</option>
    <option>橙子</option>
  </optgroup>
  <optgroup label="蔬菜">
    <option>西红柿</option>
    <option>胡萝卜</option>
    <option>黄瓜</option>
  </optgroup>
</select>

<select>
  <option>苹果</option>
  <option disabled>---------</option>
  <option>香蕉</option>
  <option>橙子</option>
  <option disabled>---------</option>
  <option>西红柿</option>
  <option>胡萝卜</option>
  <option>黄瓜</option>
</select>

<select>
  <option>苹果</option>
  <option class="separator"></option>
  <option>香蕉</option>
  <option>橙子</option>
  <option class="separator"></option>
  <option>西红柿</option>
  <option>胡萝卜</option>
  <option>黄瓜</option>
</select>

.option.separator {
  border-top: 1px solid black;
  background-color: gray;
  height: 1px;
}