-4

I'm having some trouble getting a simple CSS rule to work. I want to have an option field in a select element change it's color when it's selected. According to w3school :checked would be the correct selector as it applies to input and option. It might be a totally easy fix but I can't figure out what's wrong. Any ideas?

#location-options select option:checked {
    color: red;
}
<form id="location-options">
  <select name="location-category" id="location-category">
    <option value="">Select</option>
    <option value="test1">Imbiss</option>
    <option value="test2">Restaurant</option>
  </select>
</form>
tacoshy
  • 10,642
  • 5
  • 17
  • 34
orcus404
  • 11
  • 2
  • 3
    `:checked` only applies to `` and ``. Moreover, the ` – zer00ne Mar 26 '22 at 11:50
  • The above code works perfectly fine like u want it to run – Archit Gargi Mar 26 '22 at 12:14
  • @zer00ne: I quote from W3: "The :checked selector matches every checked element (only for radio buttons and checkboxes) and – orcus404 Mar 26 '22 at 12:24
  • @ArchitGargi: It does in Chrome as I noticed just now, it doesn't in Firefox (got the newest version, no red color). – orcus404 Mar 26 '22 at 12:25
  • @orcus404 That quote is from W3? Do not rely on W3, MDN is a far better resource. Go to https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_checked2 test that with both browsers and let me know if when clicking on an ` – zer00ne Mar 26 '22 at 13:09
  • @zer00ne you should specifically mention `w3school` not `W3` which refers to `W3C` and is the official consortium to norm W3 technologies. Espacially as both are not connected in anyway. I agree that w3school is the terrible source for most parts and I'm aware that orcus mis-used the wrong name first. – tacoshy Mar 26 '22 at 14:04
  • works for me fine with the last 5 firefox versions. – tacoshy Mar 26 '22 at 14:06
  • @tacoshy Doesn't work in current Firefox/MacOS ARM (and probably also won't on MacOS/Intel). w3schools is not as bad as it once was, it is in fact in many cases a more precise and helpful resource than MDN, where I happen to run increasingly often into a lack of information I'm looking for. – connexo Mar 26 '22 at 14:49
  • @tacoshy No, his quotes from W3Schools. If a feature isn't available in both browsers, it's not worth using, W3Schools IMO is easier to find things, but it only scratches the surface, MDN will address compatibility issues such as https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#styling_with_css. W3S doesn't. – zer00ne Mar 26 '22 at 14:59
  • So I'm using Firefox 98.0.2 and it doesn't work. Nothing works with select option:checked, I tried it with my own page, with JSFiddle, with Stackoverflow, on W3school (yes, I meant that, sorry), on the link from Mozilla you provided @zer00ne. NOTHING works. Zero. If it worked in previous versions of Firefox, I can only say it doesn't work in the current version on my installation of it. – orcus404 Mar 26 '22 at 21:59
  • I did it now with jQuery by the way, a CSS only solution seems not to be able to do the trick for all browsers. – orcus404 Mar 26 '22 at 22:19
  • @orcus404, yeah your better off making something from scratch, https://stackoverflow.com/a/53759295/2813224 – zer00ne Mar 26 '22 at 23:14

1 Answers1

-1

check this example , using css I have changed the design of checked option, hope this will help

     <form id="location-options">
        <select name="location-category" id="location-category">
            <option value="">Select</option>
            <option value="test1">Imbiss</option>
            <option value="test2" selected>Restaurant</option>
            <option value="test1">Imbiss</option>
            <option value="test2">Restaurant</option>
        </select>
    </form>
    <style>
        #location-options select option[selected],
        #location-options select option:hover,
        #location-options select option:focus,
        #location-options select option:active,
        #location-options select option:checked {
            background: red;
            color: white
        }

    </style>
Lokesh Thakur
  • 138
  • 1
  • 1
  • 9
  • Thank you @Lokesh, again it's not showing in Firefox but in Chrome (didn't test any other browsers). Can anyone confirm or deny this using Mozilla FF? Making styles !important or using inline styles doesn't seem to help unfortunately. If anyone else experiences this with FF, then it's not supported but that's weird since I read it should be. – orcus404 Mar 26 '22 at 12:45
  • works both fine for me. – tacoshy Mar 26 '22 at 14:07
  • Which browser and version @tacoshy? – orcus404 Mar 26 '22 at 22:13
  • @rocus404 kindly check it is working in firefox too, I have updated the answer, if possible give me up votes – Lokesh Thakur Mar 28 '22 at 08:50