HTML5 表单选择字段在悬停之前不显示答案

【问题标题】：HTML5 Form Select Field not displaying until hoverHTML5 表单选择字段在悬停之前不显示
【发布时间】：2018-02-05 23:32:19
【问题描述】：

我无法在 Windows 上查看我的下拉菜单项。当我打开下拉菜单时，选项会被隐藏，直到您将鼠标悬停在它们上方。一切似乎在 Mac (Chrome/Safari) 上运行良好，但在 Windows (Chrome/IE) 上运行不正常。有没有人遇到过这种情况？

这是我的 HTML：

<select>
    <option value disabled selected>Select your option</option>
    <option value=“duck”>Duck</option>
    <option value=“lamb”>Lamb</option>
    <option value=“vegetarian”> Vegetarian </option>
</select>

您可以在此处查看相关网站： http://newyearnewshaki.com > 点击回复按钮

【问题讨论】：

在 Windows 10 和 Chrome 上尝试...似乎第一个选项下方的选项是白色的，所以，没有按预期显示，但在这里...只需删除或更改规则并且...您的选项将出现

标签： css html forms select

【解决方案1】：

将您选择的背景颜色更改为黑色。

您的字体是白色的，而您的背景颜色也是白色的，文本仅在您悬停时显示，因为您悬停会将背景颜色更改为灰色。

【讨论】：

【解决方案2】：

因为您有一个将字体颜色设置为白色的 CSS 规则。第 2084 行：

input,textarea,file,select {
    font-family: "Montserrat",sans-serif;
    width: 100%;
    background: transparent;
    border: 2px solid #FFF;
    padding: 1em;
    margin: 1em 0 2em 0;
    font-size: 1em;
    color:#FFF; /* HERE */
    outline: none;
    -webkit-transition: border 0.2s ease-in-out;
    transition: border 0.2s ease-in-out;
    border-radius: 5px;
}

【讨论】：