How to remove blue background for focus/hover on select/option dropdown

Question

How do i remove the blue background when active on an option and hovering on an option with my select dropdown.

Here is a screenshot of what i mean:

I have tried every css rule i could thin off and even search the internet, including here but nothing is working

.language {
  float: right;
  margin-top: -45px;
  padding-right: 25px;
}

.language select {
  width: 180px;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: '';
  cursor: pointer;
}

.language select::-ms-expand {
  display: none;
}

.language option {
  background-color: #000;
  color: #fff;
}

.language option:hover {
  background-color: #000;
  color: #fff;
}

.language-selector::before {
  font-family: "Font Awesome 5 Free";
  content: "\f0ac";
  visibility: visible;
  font-weight: 900;
  position: relative;
  float: left;
  margin-left: 1690px;
  margin-top: -53px;
}

<div class="language">
  <select>
    <option value="">English</option>
    <option value="">Deutsch</option>
  </select>
</div>

You may be able to try a few fixes from this thread here. https://stackoverflow.com/questions/19388011/how-to-change-colour-of-blue-highlight-on-select-box-dropdown — Julian Peffer, Apr 01 '19 at 13:49
To customize a select box, you have design a select box that works exactly like the order dropdown and then sync them together, and overlap the former with the later. — Code_Ninja, Apr 01 '19 at 13:50

score 1 · Answer 1 · answered Apr 01 '19 at 13:50

1

Well, you can't. This is set by the OS. Sorry :/

answered Apr 01 '19 at 13:50

scooterlord

15,124
11
49
68

5

This should be a comment. This is not an answer. Even if it is by OS, still dropdowns and select boxes can be customized. – Code_Ninja Apr 01 '19 at 13:52
Well, I disagree and I am sorry you feel this way; it IS an answer and a good one if you ask me. Straight in the point. The question is about options and not select boxes. Providing alternative solutions like dropdowns is out of the scope of the question. – scooterlord Apr 01 '19 at 18:33
1

@Code_Ninja So show a working example. None of the dupes work in several browsers without creating a real widget – mplungjan Apr 02 '19 at 05:46
@mplungjan would it be okay, if I share an external link where I have customized the dropdown, since I feel too lazy to gather the code from there? – Code_Ninja Apr 02 '19 at 07:19
1

@mplungjan let me find the link. – Code_Ninja Apr 02 '19 at 07:24
@mplungjan [Here](https://cn.fresh.com/cn/lotusmaskapply) is a link to a page where dropdowns are customized. Its in Chineses though. Please check. – Code_Ninja Apr 02 '19 at 07:29
@mplungjan The CSS in this link might not as good as it should be, its made by a newbie, but it will provide a vague idea. – Code_Ninja Apr 02 '19 at 07:30
1

@Code_Ninja I see a blue background https://imgur.com/a/DVHI89O in Chrome.. Works in Edge – mplungjan Apr 02 '19 at 07:37
1

@scooterlord - so actually some browser DO allow it. See code_ninja's link in Edge – mplungjan Apr 02 '19 at 07:43
Hacks and shivs will always be there or random browser-specific styling. But, what's the point if not used by all major browsers? Edge is considered obsolete and its support is already dropped, so I don't see any victories here. Also, in the link mentioned, the left one is NOT a select element, and the right select element shows exactly like how it should in Edge - that is default select style. – scooterlord Apr 02 '19 at 07:48
Yes this is a hack, but if you target at presenting the data to customers or people who visit your website, it works as it gives you a custom select box. – Code_Ninja Apr 02 '19 at 07:58
The OP explicitly states 'select dropdown', the image attached is indeed a select dropdown. Providing solutions not focused on styling the select element is out of scope of the initial question. – scooterlord Apr 02 '19 at 08:02
But when we are trying to provide a solution during development, the only aim that we have is not element/task oriented, but it is also to figure out whether there a way around or not. So this is a way around. – Code_Ninja Apr 02 '19 at 08:33
To give an end to the argument: the link that was provided in the comments shows a 'custom dropdown element'-aka NOT a select dropdown, and a select dropdown that is semi-styled without providing a solution to the actual question about the options select. I have done extensive research when writing my own framework and you can't avoid this. There are specific reasons why people want default select elements styled than using plugins or any other 'custom select' (eg native behavior on mobile devices). Also one cannot guess, estimate or assume what the OP wants/needs which is exactly what you do. – scooterlord Apr 02 '19 at 08:50

score 0 · Answer 2 · answered Apr 01 '19 at 14:32

0

Try this

:focus {outline:0 !important;}

and this

:hover {outline:0 !important;}

If this is not working try on ur own css style !importent this will overwrite all the normall css

Good luck :)

answered Apr 01 '19 at 14:32

Maarten de Wolf

152
2
16

score 0 · Answer 3 · answered Apr 01 '19 at 14:44

Usually you'd use background: transparent but you have to tell us the rule that's setting the blue color or if it's the OS/browser as someone else mentioned, tell us which OS/browser. Dropdown attributes can't always be styled as many are set by the browser (see the diff between them in Firefox and Chrome). The solution for complete style control is unfortunately to create your own dropdowns using a trigger and list of items you toggle visibility and handle the user's selection.

score 0 · Answer 4 · edited Aug 23 '21 at 22:00

0

hi It's happend for me and this is mt solution {background: transparent !important;}

edited Aug 23 '21 at 22:00

Dharman

30,962
25
85
135

answered Aug 23 '21 at 21:55

amira BEN MOUSSA

1
1

1

Welcome to Stack Overflow! Please take a moment to read through the [editing help](//stackoverflow.com/editing-help) in the [help]. Formatting on Stack Overflow is different than other sites. – Kevin M. Mansour Aug 23 '21 at 23:44

How to remove blue background for focus/hover on select/option dropdown

4 Answers4