选择选项后如何更改 Select 标记的文本颜色

Question

I'm new to CSS, and the following example is confusing me. So I would like to get a better understanding.

Here's what I did:

HTML:

<select id="dropdown" required>
      <option disabled selected value>Choose current role</option>
      <option class="option">Student</option>
      <option class="option">Full Time Job</option>
      <option class="option">Prefer Not to Say</option>
      <option class="option">Others</option>       
</select>
       

CSS:

body: {color: white;}

Either before and after any option is clicked on the webpage, the text color on the Select bar will be white.

I tried to change the text color with below syntax but to no avail:

#dropdown {
    padding-right: 100%;
}

#dropdown:focus:after {
    color: black;
}

It only works when I take out the #dropdown declaration:

#dropdown:focus:after {
    color: black;
}

But I want to keep the #dropdown declaration for the creating padding. Is there other way to make this work?

And why doesn't it work with both #dropdown and #dropdown:focus:after declarations?

Answer 1

Try this:

 var select = document.getElementById('mySelect'); select.onchange = function () { select.className = 'redText'; }

 .redText { background-color:#F00; }

 <select id="mySelect"> <option>1</option> <option>2</option> <option>3</option> </select>

This is with javascript, i did it as easy as possible.

Answer 2

<select> tags are difficult to style, you'll need to strip it down first by using appearance: none on the select.

 body { font: 2ch/1 Consolas; } fieldset { position: relative; display: inline-block; border: 0; } select { appearance: none; display: inline-block; color: tomato; height: 28px; padding: 3px 30px 3px 6px; font: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: #000; } select:focus { background: #000; color: lime; }.icon { position: absolute; top: 6px; right: 16px; display: inline-block; padding: 0; width: 22px; height: 27px; background: url(https://i.ibb.co/Kx33pSY/01.jpg) right / 90% no-repeat #000; pointer-events: none; }

 <fieldset> <output class='icon'></output> <select id="dropdown" required> <option disabled selected>Choose current role</option> <option class="option">Student</option> <option class="option">Full Time Job</option> <option class="option">Prefer Not to Say</option> <option class="option">Others</option> </select> </fieldset>

Answer 3

You can try this too:

select option {
   background - color: white;
   font - weight: bold;
   color: red;
 }

An HTML "select" element can be styled, however very minimally. Otherwise, if you want every different option colour, give a separate class or id to all options.

Answer 4

A different sort of solution would be to create your own dropdown menu using HTML, CSS and JS. This would give you complete visual control. Styling select tags can be really tricky as every browser as their own unique way of rendering them.

Answer 5

try with different browsers as well