How to Turn Off the Blue Highlight Box in Google Sheets

Question 1

Yes, you could change the background of select but you will not be able to change the highlight color (when you hover) by using CSS!

You have few options:

Is to convert select into ul, li kind of select and do anything you want with this.
Use libraries like Choosen, Select2 or jQuery Form Styler . These allow you to style in much more broad and cross-browser way.

Question 2

I believe you are looking for the outline CSS property (in conjunction with active and hover psuedo attributes):

                /* turn it off completely */ select:active, select:hover {   outline: none }  /* make it red instead (with with same width and style) */ select:active, select:hover {   outline-color: red }

Full details of outline, outline-color, outline-style, and outline-width https://developer.mozilla.org/en-US/docs/Web/CSS/outline

Question 3

Just found this whilst looking for a solution. I've only tested it FF 32.0.3

                box-shadow: 0 0 10px 100px #fff inset;

Question 4

try this.. I know it's an old post but it might help somebody

                select option:hover,     select option:focus,     select option:active {         background: linear-gradient(#000000, #000000);         background-color: #000000 !important; /* for IE */         color: #ffed00 !important;     }      select option:checked {         background: linear-gradient(#d6d6d6, #d6d6d6);         background-color: #d6d6d6 !important; /* for IE */         color: #000000 !important;     }

Question 5

When we click on an "input" element, it gets "focused" on. Removing the blue highlighter for this "focus" action is as simple as below. To give it gray color, you could define a gray border.

                select:focus{     border-color: gray;     outline:none; }

Question 6

This works for firefox and chrome, falls back gracefully to the system color in IE. Just be sure to set the title property to the content of the option. It allows you to set the background and foreground colors.

                select option:checked:after {     content: attr(title);     background: #666;     color: #fff;     position: absolute;     width: 100%;     left: 0;     border: none; }

Question 7

To both style the hover color and avoid the OS default color in Firefox, you need to add a box-shadow to both the select option and select option:hover declarations, setting the color of the box-shadow on "select option" to the menu background color.

                select option {   background: #f00;    color: #fff;    box-shadow: inset 20px 20px #f00 }   select option:hover {   color: #000;    box-shadow: inset 20px 20px #00f; }

Question 8

image of focus class in button having box-shadow

try removing box shadow of the :focus class in the button, the image attached shows of how this is in bootstrap.

              .dropdown .btn:focus{     box-shadow: none; }

TarishTarish 179 3 silver badges 5 bronze badges · Answer · 2021-06-18 07:33:47Z

image of focus class in button having box-shadow

try removing box shadow of the :focus class in the button, the image attached shows of how this is in bootstrap.

              .dropdown .btn:focus{     box-shadow: none; }

Question 9

Add this in your CSS code and change the red background-color with a color of your choice:

                .dropdown-menu>.active>a {color:black; background-color:red;} .dropdown-menu>.active>a:focus {color:black; background-color:red;} .dropdown-menu>.active>a:hover {color:black; background-color:red;}

IliaIlia 12.7k 11 gold badges 51 silver badges 83 bronze badges · Accepted Answer · 2013-10-15 18:22:13Z

Yes, you could change the background of select but you will not be able to change the highlight color (when you hover) by using CSS!

You have few options:

Is to convert select into ul, li kind of select and do anything you want with this.
Use libraries like Choosen, Select2 or jQuery Form Styler . These allow you to style in much more broad and cross-browser way.

answered Oct 15, 2013 at 18:22

IliaIlia

12.7k 11 gold badges 51 silver badges 83 bronze badges

3

Select2 is pretty decent, using the OS UX but not overdoing it with crazy styled selectors that people just don't know how to use.. but no +1 cause its not really answering the question OP asked...

Aug 11, 2015 at 10:11
@ppumkin What do you want to say, pal, I'm not sure??

Aug 11, 2015 at 10:12
Is this still true?

Mar 22, 2019 at 16:36

Nick BNick B 7,529 2 gold badges 31 silver badges 28 bronze badges · Answer 2 · 2014-11-20 01:01:57Z

I believe you are looking for the outline CSS property (in conjunction with active and hover psuedo attributes):

                /* turn it off completely */ select:active, select:hover {   outline: none }  /* make it red instead (with with same width and style) */ select:active, select:hover {   outline-color: red }

Full details of outline, outline-color, outline-style, and outline-width https://developer.mozilla.org/en-US/docs/Web/CSS/outline

I think this is the background highlight and not the focus outline — Apr 28, 2016 at 14:22
This doesn't answer the question at all - the OP wants to replace the browser's default blue highlight with another color. — May 29, 2020 at 23:43

Answer 3 · 2014-10-03 15:49:09Z

Just found this whilst looking for a solution. I've only tested it FF 32.0.3

                box-shadow: 0 0 10px 100px #fff inset;

Chen-Tsu Lin

22.1k 16 gold badges 51 silver badges 63 bronze badges

answered Oct 3, 2014 at 15:49

4

select option:hover{ box-shadow: 0 0 10px 10px #e1358f inset; } works, but only in FF and only when your mouse stays on the element, it turns blue the moment you move away from the select box while it is still open.

Dec 29, 2014 at 20:41
@CPHPython Perhaps can use something like select2

May 19, 2018 at 8:37
@Anima-t3d thanks, I am familiar with select2, but I was just trying to limit the usage of the number of plugins.

May 21, 2018 at 8:29
Styling native select element is very tricky, I think using a plugin for this is one of the most common use cases.

May 21, 2018 at 14:25

tercou1tercou1 349 3 silver badges 8 bronze badges · Answer 4 · 2018-01-22 11:33:56Z

try this.. I know it's an old post but it might help somebody

                select option:hover,     select option:focus,     select option:active {         background: linear-gradient(#000000, #000000);         background-color: #000000 !important; /* for IE */         color: #ffed00 !important;     }      select option:checked {         background: linear-gradient(#d6d6d6, #d6d6d6);         background-color: #d6d6d6 !important; /* for IE */         color: #000000 !important;     }

It styles only background of checked option, doesn't work on hover. But anyway it is helpful. — Mar 29, 2018 at 10:02

Answer 5 · 2019-02-12 16:12:06Z

When we click on an "input" element, it gets "focused" on. Removing the blue highlighter for this "focus" action is as simple as below. To give it gray color, you could define a gray border.

                select:focus{     border-color: gray;     outline:none; }

answered Feb 12, 2019 at 16:12

3

Yes, it changes the border color when the select is focused. However, the box shadow should be overritten as well: 'box-shadow: 0 0 2px gray;' to remove the blue color entirely.

Sep 26, 2019 at 8:38
yeah, i am also listening this radio of issue

Jun 19, 2020 at 9:25
Does not work for hovering over an option, instead this turns the entire background of the dropdown to this background color. The Question asked was how do we change the default blue highlight color.

Aug 17, 2020 at 15:46

Answer 6 · 2015-02-17 12:56:20Z

This works for firefox and chrome, falls back gracefully to the system color in IE. Just be sure to set the title property to the content of the option. It allows you to set the background and foreground colors.

                select option:checked:after {     content: attr(title);     background: #666;     color: #fff;     position: absolute;     width: 100%;     left: 0;     border: none; }

answered Feb 17, 2015 at 12:56

2

This is super hacky but it does exactly what I wanted. Thank you :) (Works with Electron, too, FYI)

Jun 17, 2017 at 3:27
Not working in chrome 63 or firefox 57... And pseudo-elements use two colons?

Dec 18, 2017 at 21:13

Answer 7 · 2016-05-21 07:44:17Z

To both style the hover color and avoid the OS default color in Firefox, you need to add a box-shadow to both the select option and select option:hover declarations, setting the color of the box-shadow on "select option" to the menu background color.

                select option {   background: #f00;    color: #fff;    box-shadow: inset 20px 20px #f00 }   select option:hover {   color: #000;    box-shadow: inset 20px 20px #00f; }

This does NOT get rid of the blue hover colour you get when moving the cursor over the dropdown options. — Jan 15, 2018 at 14:58
This is the only one that worked for me. Although as @klokop mentioned, it does not get rid of the blue hover. — Dec 11, 2018 at 19:06

ahmedahmed 17 3 bronze badges · Answer 9 · 2018-03-25 02:23:27Z

answered Mar 25, 2018 at 2:23

ahmedahmed

17 3 bronze badges

dimmatdimmat 197 1 gold badge 2 silver badges 10 bronze badges · Answer 10 · 2018-12-30 04:34:46Z

Add this in your CSS code and change the red background-color with a color of your choice:

                .dropdown-menu>.active>a {color:black; background-color:red;} .dropdown-menu>.active>a:focus {color:black; background-color:red;} .dropdown-menu>.active>a:hover {color:black; background-color:red;}

McKeddie Sweaver

How to Turn Off the Blue Highlight Box in Google Sheets

10 Answers 10

Introducing: Trending sort

Not the answer you're looking for? Browse other questions tagged css or ask your own question.

Menu Halaman Statis