Customize select bottom border color on activate and focus

Topic: Customize select bottom border color on activate and focus

As226 asked 4 years ago

Hello I need help to customize my select bottom border when activated or focused. My select html :

<select class="mdb-select md-form mdb-select-dropdown" >
    <option value="" disabled selected>Choice</option>
    <option value="1">Option1</option>
    <option value="2">Option2</option>                          
</select>
<label class="mdb-main-label">Choice</label>

Help please

Regards

Add comment

Krzysztof Wilk staff answered 4 years ago

0 0 Best answer

Hi!

You can use these styles to achieve that

.select-wrapper input.active, .select-dropdown:focus{
  border-bottom: 1px solid red !important;
  box-shadow: 0 1px 0 0 red !important;
 }

Of course, you can change my color for every color you want.

Best regards

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

User: Free
Premium support: No
Technology: MDB jQuery
MDB Version: 4.19.1
Device: PC
Browser: Chrome
OS: W10
Provided sample code: No
Provided link: No

Related topics

7: Keyboard tab navigation to search field of material select is not working. Upon receiving the focus to search textbox, dropdown disappears and leaving inaccessible for a keyboard user

2: IE 11 Select Change Not Supported

2: Searchable select with very large dataset

2: Add/Remove of select options multiplies nested wrappers

2: MD Select showing HTML chars incorrectly on load

About author

As226

10Support score
2Questions 0Answers

0Snippets likes 1Snippets