Modifying the color of the highlighted selection in a dropdown select box

Question

Modifying the color of the highlighted selection in a dropdown select box

Is it possible to change the blue highlight on this dropdown to gray?

Check out this demo of a select box

I am aiming to alter the highlight color to gray, can someone help me achieve this?

select {
  border: 0;
  color: #EEE;
  background: transparent;
  font-size: 20px;
  font-weight: bold;
  padding: 2px 10px;
  width: 378px;
  *width: 350px;
  *background: #58B14C;
  -webkit-appearance: none;
}

#mainselection {
  overflow: hidden;
  width: 350px;
  -moz-border-radius: 9px 9px 9px 9px;
  -webkit-border-radius: 9px 9px 9px 9px;
  border-radius: 9px 9px 9px 9px;
  box-shadow: 1px 1px 11px #330033;
  background: url("http://www.danielneumann.com/wp-content/uploads/2011/01/arrow.gif") no-repeat scroll 319px 5px #58B14C;
}

<div id="mainselection">
  <select>
    <option>Select an Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</div>

css

Answer 1

Answer №1

A solution could be to alter the background of the select element, however, adjusting the highlight color (on hover) using CSS may not be possible!

There are a few alternatives:

Consider transforming the select into a list structure (ul, li) and customize it to your liking.
Explore libraries like Choosen, Select2, or jQuery Form Styler. These tools offer more extensive styling options across various browsers.

Answer 2

A solution could be to alter the background of the select element, however, adjusting the highlight color (on hover) using CSS may not be possible!

There are a few alternatives:

Consider transforming the select into a list structure (ul, li) and customize it to your liking.
Explore libraries like Choosen, Select2, or jQuery Form Styler. These tools offer more extensive styling options across various browsers.

Answer 3

Answer №2

If you are searching for a way to style the outline of an element in CSS, you can use the outline property along with active and hover pseudo-classes:

/* remove the default outline */
select:active, select:hover {
  outline: none;
}

/* change the outline color to red (keeping the same width and style) */
select:active, select:hover {
  outline-color: red;
}

For more information on the properties `outline`, `outline-color`, `outline-style`, and `outline-width`, you can visit this link: https://developer.mozilla.org/en-US/docs/Web/CSS/outline

Answer 4

If you are searching for a way to style the outline of an element in CSS, you can use the outline property along with active and hover pseudo-classes:

/* remove the default outline */
select:active, select:hover {
  outline: none;
}

/* change the outline color to red (keeping the same width and style) */
select:active, select:hover {
  outline-color: red;
}

For more information on the properties `outline`, `outline-color`, `outline-style`, and `outline-width`, you can visit this link: https://developer.mozilla.org/en-US/docs/Web/CSS/outline

Answer 5

Answer №3

Stumbled upon this snippet while searching for a fix. I've tried it in Firefox 32.0.3.

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

Answer 6

Stumbled upon this snippet while searching for a fix. I've tried it in Firefox 32.0.3.

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

Answer 7

Answer №4

Give this a shot! Although it's an older post, it could still be useful for someone out there.

Try implementing the following CSS to style select options:

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

Answer 8

Give this a shot! Although it's an older post, it could still be useful for someone out there.

Try implementing the following CSS to style select options:

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

Answer 9

Answer №5

This method is compatible with both Firefox and Chrome, gracefully falling back to the system color in Internet Explorer. Make sure to assign the title property with the option's content. This technique enables customization of background and text colors.

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

Answer 10

This method is compatible with both Firefox and Chrome, gracefully falling back to the system color in Internet Explorer. Make sure to assign the title property with the option's content. This technique enables customization of background and text colors.

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

Answer 11

Answer №6

In order to customize the hover color and prevent the default OS color in Firefox, you must include a box-shadow in both the select option and select option:hover declarations. Ensure that the color of the box-shadow on "select option" matches 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;
}

Answer 12

In order to customize the hover color and prevent the default OS color in Firefox, you must include a box-shadow in both the select option and select option:hover declarations. Ensure that the color of the box-shadow on "select option" matches 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;
}

Answer 13

Answer №7

Whenever an "input" element is clicked, it becomes the center of attention through "focus". To remove the default blue highlight that occurs during this action, you can easily achieve it by using the following CSS. If you wish to give it a gray color instead, you can define a gray border.

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

Answer 14

Whenever an "input" element is clicked, it becomes the center of attention through "focus". To remove the default blue highlight that occurs during this action, you can easily achieve it by using the following CSS. If you wish to give it a gray color instead, you can define a gray border.

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

Answer 15

Answer №8

I recently stumbled upon a website that offers some really cool themes for select boxes. Check it out here!

If you're looking to spruce up the overall look of your select box, you can give these themes a try: blue - yellow - grey

Answer 16

I recently stumbled upon a website that offers some really cool themes for select boxes. Check it out here!

If you're looking to spruce up the overall look of your select box, you can give these themes a try: blue - yellow - grey

Answer 17

Answer №9

Try implementing the following CSS code and feel free to customize the background color to suit your preferences:

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

Answer 18

Try implementing the following CSS code and feel free to customize the background color to suit your preferences:

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

Modifying the color of the highlighted selection in a dropdown select box

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Answer №9

Similar questions

Can the color of text be adjusted (to either white or black) based on the background color (in any color and format)?

Transform the functionality of DIV and UL to mimic that of a SELECT element

Issue with plain CSS animation not functioning in NextJS with Tailwind CSS

What method does the CSS standard dictate for measuring the width of an element?

Windows and MacOS each use unique methods for displaying linear gradients

I have a question for you: How can I customize the font size in Material-UI TextField for different screen sizes?

Add the bootstrap class to the element only when the screen size meets certain criteria

You are only able to click the button once per day

Responsive Website with Horizontal Scrolling

I'm looking to generate a semicircle progress bar using jQuery, any suggestions on how

Using HTML5 and CSS transitions to scale an image within a 960 grid layout

Troubleshooting: Angular 2 property binding animations not functioning as expected

Centered image

I am unable to align the image in the center, what could be causing it not to center properly?

What is preventing me from adjusting the height of this DIV element?

What steps do I need to follow in order to replicate the layout shown in this

How can I design a trapezoid with see-through borders and background?

The Bootstrap navigation bar vanishes when viewed on mobile devices

Attempting to reduce the width of the dig when it reaches 400

What is the reason that my "width: auto" property is not properly adjusting to the content's width?