JSFiddle - React, Tailwind, and code Playground

by Nick Sdk

HTML

<select name="test">
    <option val="a">A</option>
    <option val="b" class="select-hr">B</option>
    <option val="c">C</option>
    <option val="d">D</option>
</select>

Broken in most browsers.

<hr />

<select name="test">
    <option val="a">A</option>
    <option val="b">B</option>
    <option disabled>- - - - - - - - -</option>
    <option val="c">C</option>
    <option val="d">D</option>
</select>

Should work everywhere

CSS

option.select-hr { border-bottom: 1px dotted #000; }
option[disabled] {
  background-color: #f5f5f5;
  text-align-last:center; 
}
select {
  text-align: center;
}