Question

我在Chrome for Windows上遇到了我的选择元素问题，但我在Chrome for Mac OSX上没遇到它。（请参阅下面的屏幕截图）

http://i.stack.imgur.com/92qLS.png

http://i.stack.imgur.com/lpDg8.png

我没有直接将任何样式应用于选项元素，尽管它可以继承样式。下面是我的CSS;注意：我使用的是SCSS。

.site-page--archive__dropdown select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  height: 40px;
  width: 120%;
  border: none;
  background: none;
  color: #43cdcb;
  text-transform: uppercase;
  font-size: 0.85em;
  font-family: "Source Sans Pro", sans-serif;
}

.site-page--archive__dropdown select:focus {
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: none;
}

.site-page--archive__dropdown select:hover {
  color: #fff;
}

如果有人遇到过这个问题，那么如果你能告诉我你是如何解决它的话会很棒吗？

Answer 1

我认为这里有足够的代码来调试问题。 here是固定版本的插件。选择颜色的问题是，只要你不骑过它，所有的孩子都会继承颜色。

在您认为合适时为“选择选项”添加其他样式，它应该没问题。我在plunkr做了同样的细节。您可以尝试删除“选择选项”样式，以发现您的问题是可重现的。让我知道它是如何工作的。

这是适用于您的CSS：

select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        position: relative;
        height: 40px;
        width: 120%;
        border: none;
        background: none;
        color: black;
        text-transform: uppercase;
        font-size: 0.85em;
    }

select:focus {
            border: none;
            box-shadow: none;
            outline: none;
        }

        select:hover {
            color: #fff;
        }
select option {
            color: black;;
        }

应用颜色以选择选项文本。导致文本被隐藏

1 个答案: