我使用扩展字符集中的水平条符号代替常规的连字符，如果用户在替换该字符的另一个国家，那么它看起来不太好，但对我来说很好。有一个不同的字符范围，你可以使用一些伟大的效果，没有css涉及。

<option value='-' disabled>――――</option>

另一种方法是在选项上使用css1x1背景图像，这似乎只适用于firefox，并有一个“----”后退

<option value="" disabled="disabled" class="SelectSeparator">----</option> 

.SelectSeparator
    {
      background-image:  url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==);
      color:black;
      background-repeat:repeat-x;
      background-position:50% 50%;
      background-attachment:scroll;
}

http://jsfiddle.net/yNecQ/6/

或者使用javascript (jquery):

-hide the select element and 
-show a div which can be completely styled and 
-reflect the div state onto the select for the form submit

http://tutorialzine.com/2010/11/better-select-jquery-css3/

另请参阅 如何在html选择控件中添加水平线?

Try:

<optgroup label="----------"></optgroup>

这个总是最好的。

<option>First</option>
<option disabled>_________</option>
<option>Second</option>
<option>Third</option>

你可以用em破折号" - "。每个字符之间没有可见的空格。(某些字体!) 在HTML中:

<option value="—————————————" disabled>—————————————</option>

或者在XHTML中:

<option value="—————————————" disabled="disabled">—————————————</option>

如果不想使用optgroup元素，可以将破折号放在option元素中，并为其指定disabled属性。它将是可见的，但灰色。

<option disabled>----------</option>