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

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

我有下面的代码

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

---

我需要在每个选项中添加底部边框。没有js是否可能…？

是。请尝试以下代码：

<select>
    <option class="opt">1</option>
    <option class="opt">2</option>
    <option class="opt">3</option>
    <option class="opt">4</option>
    <option class="opt">5</option>
    <option class="opt">6</option>
</select>

使用CSS，您可以：

select option {
  border-bottom: 1px solid black;
}

演示：

试试这个

注意：这不适用于chrome。html select在样式设置方面有很多限制。但是，我们可以使用一些卡车在选择框中添加样式。为此

---

ref:

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

浏览器对选项样式设置的支持非常有限，如果您想设置下拉列表的样式，我建议您研究其他方法，如以下教程：

这将使用列表和jquery创建一个完全可自定义的下拉列表

更新：

或者。。。研究：

---

你试过添加它吗？有那么难吗@外星人先生，这根本不起作用browsers@Mr.Alien我写的是同一个JSFIDLE，只是颜色不同。我用的是红色。@DipeshParmar hehe:DOOP's，42？你偷了它：D@Mr.外星人没有。我在JSFIDLE没有账户。所以我更新了一些人的链接，之前的链接是：@Mr.Alien:Ohk。。！！我创造了我的小提琴并更新了答案。下次不会更新他人的。@Kinjan其不适用于chrome。我对我的答案做了一些修改，看看我不能用js。我不知道没有js怎么做。html select有许多样式限制，因此它不能在crome上运行。为了克服这个问题，我们使用了js。

select option {
  border-bottom: 1px solid black;
}

<select>
   <option class="opt">1</option>
   <option class="opt">2</option>
   <option class="opt">3</option>
   <option class="opt">4</option>
   <option class="opt">5</option>
   <option class="opt">6</option>
</select>

.opt{   
   text-decoration:underline;
}

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

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