如何更改边框宽度

Question

我有一个像下面这样的选择框：

<select class="selectpicker" multiple data-live-search="true" name="color[]" title="موردی انتخاب نشده">

<option class="" style="border-bottom:2px solid; border-color:red" value="">قرمز</option>
<option class="" style="border-bottom:2px solid; border-color:black" value="">مشکی</option>
<option class="" style="border-bottom:2px solid; border-color:white" value="">سفید</option>


</select>

我想在选项的每个文本下都有一行，但不像下面这样

因为它是全角，但我想在文本下方加上一行，例如“قرمز”

我尝试了witdh，但这不是一个好方法，因为我想拥有一个可点击全角的选项。

Answer 1

该解决方案在CSS中使用Text-decoration：

<option class="" style="text-decoration:underline;" value="">قرمز</option>

Codepen

Answer 2

要将取消限制仅限于文本，请使用text-decoration而不是边框​​。 （您可能需要使用合适的字体系列，并且该字体系列与波斯字符之间不要有下划线重叠）：

option {text-decoration: underline;}

<select style="width:100%;" class="selectpicker" multiple data-live-search="true" name="color[]" title="موردی انتخاب نشده">
<option value="" style="color:red;text-decoration-color: red;">قرمز</option>
<option value="" style="color:black;text-decoration-color: black;">مشکی</option>
<option value="" style="color:#aaaaaa;text-decoration-color: aaaaaa;">سفید</option>
</select>

Answer 3

使用此div {border-width：thin;} 一些属性：-

值|说明

中|指定中等边框。这是默认设置
薄|指定细边框 厚指定粗边框
长度允许您定义边框的粗细。了解长度单位|
首字母|将此属性设置为其默认值。阅读有关初始 继承|从其父元素继承此属性。了解有关继承

或者您可以使用

h1{
  border-style: solid;
  border-width: 15px;
}