CODEWITHSUNDEEP
htmlcss
Hassan
Hassan

Reputation: 422

How to change border width

I have a select box like bellow :

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

and I want to have line under each text of option but not like bellow

enter image description here

Because it is full width but I want to have line just under the text e.g. "قرمز"

I have tried witdh but it was not a good way because I want to have an option with full width clickable.

Upvotes: 0

Views: 85

Answers (3)

Ali Sheikhpour
Ali Sheikhpour

Reputation: 11045

To limit the undeline to the text only, use text-decoration instead of border. (You may need to use a suitable font-family which has no underline overlap with Persian characters):

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>

Upvotes: 2

unknown
unknown

Reputation: 332

use this div {border-width: thin;} some property:-

Value | Description

medium | Specifies a medium border. This is default
thin | Specifies a thin border thick | Specifies a thick border
length | Allows you to define the thickness of the border. Read about length units |
initial| Sets this property to its default value. Read about initial inherit| Inherits this property from its parent element. Read about inherit

or you may use this 

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

Upvotes: 0

Yotam Dahan
Yotam Dahan

Reputation: 699

The solution is using Text-decoration in CSS:

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

Codepen

Upvotes: 2

Related Questions