CSS to format selected option

Question

I have this form : link to form page (form at the bottom of the page)

The problem is with the drop down menus. When you click one of the drop down menus, you see black text which I want and those are styled with ,e.g., .revenue-select option {color: #111111 !important;}

The problem is once an option is selected, the text color reverts to the grey and I want that text to be black for the selected items that are not the first placeholder option.

Please recommend how I might solve this with CSS. Thanks for your help.

please add your html and css code, theres not much we can do to help without it — Smokey Dawson, Mar 12 '18 at 03:50
i think this is what you are looking for. https://stackoverflow.com/questions/13694271/modify-select-so-only-the-first-one-is-gray — Rajath Kumar PM, Mar 12 '18 at 04:16
check this for some idea https://stackoverflow.com/questions/49024286/how-to-change-color-of-span-inside-select-option/49028144#49028144 — Temani Afif, Mar 12 '18 at 08:25

Rocks · Answer 1 · 2018-03-13T13:36:06.527

Get ready for a long read. So, I got curious about this and started trying it out on different browsers. Turns out, since option is treated as a replaced element, the extent to which you can style with :checked pseudo class is limited.
The extent to which you can style option is also limited and varies browser to browser. I was able to find a solution (involves both CSS and JS) that works on most browsers by trying it out on multiple browsers on both OS X and Windows by trial and error. I also found out that color on select or option doesn't have any effect until you change the background-color. I am not sure if this is a bug or whether setting bgcolor triggers something internally which might cause color to be considered.

Style select. This will change the color of all the options and the selected value shown.
Style option. This will change the color of all the options you see in the dropdown. At this point you will have the selected value shown set to one color (above) and the rest of the items in the dropdown to another color.
(Optional) Style option:checked. This will be the selected option in the dropdown (not the same as 1). As mentioned in the comments below, this is not supported in Firefox, so we will go ahead and additionally style it in JS as well.

$('select').change(() => {

   /* to reset all but selected back to gray
   ** Support: OSX: FF. Not on Chrome/Safari
   ** Windows: FF, Chrome, Edge. Not on IE.
   */ 
   $('option').css('color','gray');
 
   /* Support on MacOSX: FF only (not on Chrome/Safari)
   ** Windows: Chrome, FF and Edge. (not on IE)
   ** Adding this for FF support on both platforms
   */
  $('option:selected').css('color', 'blue');
});

/* 'color' on select & option doesn't work on most browsers
** (Eg: Chrome on Mac OSX) as is.
** Works if you add a background-color along with it. WEIRD.
** PS: This also changes the default look of the select a bit
*/

select {
  background-color: white;
  color: blue;
}

option {
  background-color: white;
  color: gray;
}

/* Add this only if you need to change
** the color of the option text in the dropdown
** Doesnt work on Chrome/FF/Safari on Mac OSX
** Works on Chrome, IE & Edge on Windows
*/

option:checked {
  color: blue;
}

<select>
  <option class="color" name="city">Tokyo</option>
  <option class="color" name="city">New York</option>
  <option class="color" name="city">London</option>
  <option class="color" name="city">Paris</option>
</select>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

I added .revenue-select option:checked { color: #111111 !important; } to style sheet but getting same result. When i select one of the options, it still reverts to grey, not #111111. — chris, Mar 12 '18 at 14:32
You might have already figured it out but edited my answer just in case. — Rocks, Mar 13 '18 at 13:37

CSS to format selected option

1 Answers1