如何在html选择控件中添加水平线？ [英] How do I add a horizontal line in a html select control?

问题描述

如何在下拉控件或HTML中的选择控件中添加水平线（< hr> 标签）？

<通常来说，这不是< select> 的一个特性，大多数浏览器都有非常差的样式控制。该控制。在Firefox中，您可以执行以下操作（尽管在其他浏览器中无效）：

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

与CSS：

  option.select-hr {border-bottom：1px dotted＃000; } 
  

但一般来说，唯一的方法是用破折号填入选项，并尝试使它是无法选择的。

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

请参阅： http://jsfiddle.net/qM5BA/283/

How do I add a horizontal line (<hr> tag) in the dropdown control or in select control in HTML?

解决方案

Generally speaking this is not a feature of <select>, most browsers have very poor styling control for that control. In Firefox you can do the following (though doesn't work in other browsers):

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

with CSS:

option.select-hr { border-bottom: 1px dotted #000; }

But generally speaking, the only method is to put an option in with dashes, and try to make it unselectable.

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

See: http://jsfiddle.net/qM5BA/283/

这篇关于如何在html选择控件中添加水平线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！