html - 我们可以按行分隔 select HTML 控件中的每个选项吗？

Question

我们可以将 select HTML 控件中的每个选项按行分开吗？

我有以下代码

<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
</select>

我需要在每个选项中添加底部边框，如果没有 js 是否可行......？？？

Answer 1

我不知道如何通过 css 做到这一点，因为它对 option 标签的使用非常有限，但有一点可能会有所帮助，但不是完美的解决方案。 添加一个类为 dis 的禁用选项。

<select>
    <option>1</option>
    <option class='dis' disabled="disabled">--------</option>
    <option>2</option>
    <option class='dis' disabled="disabled">--------</option>
    <option>3</option>
    <option class='dis' disabled="disabled">--------</option>
    <option>4</option>
    <option class='dis' disabled="disabled">--------</option>
    <option>5</option>
    <option class='dis' disabled="disabled">--------</option>
    <option>6</option>
</select>

和CSS:

select option.dis {
    letter-spacing: -1px;
}

http://jsfiddle.net/JvGSA/1/