选择选项后如何更改选择标签的文本颜色答案

【问题标题】：How to change text color of Select tag after an Option is selected选择选项后如何更改选择标签的文本颜色
【发布时间】：2022-01-18 05:49:30
【问题描述】：

我是 CSS 新手，下面的例子让我很困惑。所以我想更好地了解。

这就是我所做的：

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

在网页上点击任何选项之前和之后，选择栏上的文字颜色都是白色的。

我尝试使用以下语法更改文本颜色，但无济于事：

#dropdown {
    padding-right: 100%;
}

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

仅当我取出#dropdown 声明时才有效：

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

但我想保留创建填充的#dropdown 声明。有没有其他方法可以完成这项工作？

为什么它不能同时用于 #dropdown 和 #dropdown:focus:after 声明？

【问题讨论】：

::after 是一个伪元素，代表所选元素的最后一个子元素。
您可以使用 javascript 在您的 event 上查找类似于模糊或更改的 DOM 事件。然后使用 event.target.classList.add('colored_class') 之类的东西添加一个类到你想要的元素。

标签： html css select option

【解决方案1】：

试试这个：

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>

这是用javascript，我做的尽可能简单。

【讨论】：

【解决方案2】：

<select> 标签很难设置样式，您需要先在选择上使用appearance: none 将其剥离。

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 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>
<fieldset>
  <legend>Without Style</legend>
  <select 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>

【讨论】：

【解决方案3】：

你也可以试试这个：

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

可以设置 HTML select 元素的样式，但非常少。否则，如果您想要每个不同的选项颜色，请为所有选项提供单独的类或 id。

【讨论】：