0

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

我有以下代码

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

我需要在每个选项中添加底部边框是否可以不使用 js ......？？？

4

5 回答 5

2

我不确切知道如何通过 css 做到这一点，因为它对option标签的使用非常有限，但有一件事可能会有所帮助，但不是完美的解决方案。使用 class 添加一个禁用选项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/

于 2013-10-16T12:02:16.090 回答
0 
<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

.opt{   
   text-decoration:underline;
}

尝试这个

注意：这不适用于 chrome。htmlselect对样式有很多限制。但是，我们可以使用一些卡车来添加样式选择框。为了那个原因

参考：http ://cssglobe.com/custom-styling-of-the-select-elements/

于 2013-10-16T12:02:13.827 回答
0

浏览器对option样式的支持非常有限，如果您想为下拉菜单设置样式，我建议您查看其他方法，例如此处的教程：

http://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/

这使用列表和 jquery 来创建一个完全可定制的下拉菜单。

更新：

或者...查看：

于 2013-10-16T12:08:31.357 回答
-2

是的。试试下面的代码：

<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

.opt
{
    border-bottom:1px solid #333;
}
于 2013-10-16T11:56:15.377 回答
-2

使用 CSS，您可以：

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

演示：http: //jsfiddle.net/jvaibhav/jXmxm/

于 2013-10-16T11:57:30.083 回答