How to change text color of Select tag after an Option is selected-CodePudding

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 >Student</option>
      <option >Full Time Job</option>
      <option >Prefer Not to Say</option>
      <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?

CodePudding user response：

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.

CodePudding user response：

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

#dropdown {
  display: inline-block;
  color: tomato;
  height: 28px;
  padding: 3px 30px 3px 6px;
  font: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #000;
}

#dropdown:focus {
  color: lime;
  background: #333;
}

.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>
  <legend>Whith Style</legend>
  <output class='icon'></output>
  <select id="dropdown" required>
    <option disabled selected>Choose current role</option>
    <option >Student</option>
    <option >Full Time Job</option>
    <option >Prefer Not to Say</option>
    <option >Others</option>
  </select>
</fieldset>
<fieldset>
  <legend>Without Style</legend>
  <select required>
    <option disabled selected>Choose current role</option>
    <option >Student</option>
    <option >Full Time Job</option>
    <option >Prefer Not to Say</option>
    <option >Others</option>
  </select>
</fieldset>