将CSS/HTML双字体颜色转换为SELECT OPTION

CSS / HTML double font color into a SELECT OPTION

本文关键字：转换 SELECT OPTION 颜色 字体 CSS HTML      更新时间：2023-09-26

我对自定义选择选项的CSS/HTML有点问题

这是我的代码：

<select id="Month" class="form-styling-date splash_small required" title=" " style="" name="Month" tabindex="12">
<option value="1">Janvier</option>
<option value="2">Février</option>
....
<option value="11">Novembre</option>
<option value="12">Décembre</option>
<option value="9999" selected="selected">Mois</option>
</select>

这是我的CSS代码：

.form-styling-date {
    width: 100px;
    height: 35px;
    padding-left: 15px;
    border: none;
    border-radius: 20px;
    margin-bottom: 20px;
    color:#FFF;
    background: rgba(255,255,255,.2);
}

您可以从中看到问题：https://gayurban.com/sync/indexv2.php并在BIRTHDAY 中选择"注册"选项

我自定义CSS，在选中时将所选选项写为白色，因此当您选择箭头以查看所有选项时，背景和字体颜色设置为白色。所以我看不到选项列表。

如何将此字体颜色更改为黑色，并在选择时变为白色，因为当我将字体颜色设置为黑色时，我会看到列表，因此表单中的字体颜色黑色实际上不是一个可见的选择。

感谢您的帮助

select上的color属性将设置选项文本（包括选定的）的颜色，而向select option添加/覆盖颜色将设置不包括选定选项的选项的颜色，该颜色将基于为select指定的值进行设置。

CSS:

select {
  color: white; /* color of selected option */
 }
select option {
  color: black; /* color of other options */
}

此外，如果您希望您的组件CSS在整个站点中保持不变，最好将通用样式添加到标记选择器中。并添加基于class/id选择器的特定样式，在您想要更改它们的地方。

DEMO

给出

.form-styling-date option{color: black;}

在CCD_ 5文件的第243行。

保持您的选择为白色，但在您的情况下，将您的选择选项覆盖为黑色：

.form-styling-date option{
   color:black;
}

您应该尝试：

::-moz-selection { /* Code for Firefox */
color: white;}

::selection {
color: white;}

将默认样式更新为黑色：）

这是CSS的问题
在您的页面中添加此CSS。因为这个页面包含三个选择所有这些颜色都是白色。

select option{
    color:#000;
}
相关文章：