css下拉列表下面不能点

最近，在做网页开发过程中遇到了一个问题：在使用 CSS 制作下拉列表时，下拉列表下面却不能点选。
初看这个问题并不可怕，可能只是缺少了某个属性或写了一些不必要的样式，但却花费了我大量的时间，终于找到了问题所在，现在来跟大家分享一下。

在实现下拉列表的时候，我们通常会使用以下代码：

select{
    width: 200px;
    height: 30px;
    border: none;
    background-color: #fff;
} 

这样我们就可以成功的创建出一个下拉列表，但是，当我们使用某些奇怪的样式时，问题就来了，例如：

select{
    width: 200px;
    height: 30px;
    border: none;
    background-color: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
} 

在上面的代码中，我们使用了 appearance 属性，它的作用是隐藏掉默认的下拉箭头，然后我们使用 CSS 制作了一个自己的下拉箭头，这看起来很不错。

但是，问题就在这里了，当用户点击下拉列表时，实际上是点击了下拉箭头，而非 select 元素本身，所以它并不会展开下拉菜单，这就导致了下拉菜单无法正常使用。

解决方法也很简单，我们只需要添加一个 :focus 伪类，并将 appearance 属性设置为默认即可，代码如下：

select:focus {
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    appearance: menulist;
} 

总结：

CSS 实现下拉列表本身并不难，但在实际应用中可能会出现意想不到的问题，遇到这类问题，我们只需要耐心的分析，找到问题所在，再做出针对性的解决方案就可以了。