Question

我在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＆gt;点击RSVP按钮

Answer 1

因为你有一个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;
}

Answer 2

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

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

HTML5表单选择字段直到悬停才显示

2 个答案: