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

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 > 点击回复按钮

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