How to remove default chrome style for select option?

Question

How to remove the default outline generated by chrome for the select option list ? below i have added outline property to none which disable the select element outline.is there any simple way to remove the option tag's outline?

select {
  outline: none;
}

Look : https://jsfiddle.net/thilinasan166/oqfvugbs/1/

i need to remove the blue outline generated for select list .so setting outline none for select not working . — thilinasan16, Jun 21 '18 at 05:35
This is the thing I try every time and it works fine for me but why is someone downvoting everything. Everything should be explanatory. I guess this question is cursed. — Mohammed Wahed Khan, Jun 21 '18 at 05:48

score 0 · Answer 1 · edited May 17 '19 at 12:09

0

You cannot style the outline or whatever you call it, for the options dropdown as it comes from default Operating System.

Check this How to remove border of drop down list : CSS -- this answer

Despite that create your own custom select dropdowns you can find plenty of them on the web

INSPIRATION for Custom Select Elements

edited May 17 '19 at 12:09

georgeawg

48,608
13
72
95

answered Jun 21 '18 at 06:16

Mohammed Wahed Khan

836
2
14
35

seems like that's the solution. searched for a quick solution without going for a custom drop-down to edit or prevent the browser's default behavior.. – thilinasan16 Jun 21 '18 at 06:58
@thilinasan16 that is the only way you can customize and present you select box as you want. CSS sometimes can do miracles but sometimes it stands still even after watching us in trouble. Let us hope for the best in future. – Mohammed Wahed Khan Jun 21 '18 at 07:07

How to remove default chrome style for select option?

1 Answers1