css - 使用 CSS 选择框自定义

Question

有很多问题问同样的问题。我已经经历了所有事情并对以下情况感到困惑。我有一个选择框和文本框。我希望两者都有特定的高度和边框。

所以，我为两者定义了以下类

   .selClass
    {    

        border: 1px solid #CCC;
        height: 40px;   
        color:red; 

    } 


  <select class="selClass">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
  </select>

这工作正常。但是，在审阅与此相关的其他问题时，据了解选择是在操作系统级别控制的，我们可以使用 css 应用于选择框的样式非常少。

如果是这样，我的代码是否存在浏览器兼容性错误？我检查了 IE9+、Edge、Mozilla、Chrome、iphone，一切正常。所以，我认为我的代码很好。请对此发表评论。

如果我的代码是正确的，它是如何工作的，因为据我所知，select 不能由 css 控制。请帮忙。

Answer 1

需要添加appearance: none;，使浏览器不走系统默认的选择框。

就像:

select {
  -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none;
}

或者看看下面的代码片段:

.select-style {
    padding: 0;
    margin: 0;
    border: 1px solid #ccc;
    width: 200px;
    border-radius: 3px;
    overflow: hidden;
    background-color: #fff;

    background: #fff url("http://www.scottgood.com/jsg/blog.nsf/images/arrowdown.gif") no-repeat 90% 50%;
}

.select-style select {
    padding: 5px 8px;
    width: 200px;
    height: 35px;
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

.select-style select:focus {
    outline: none;
}

<div class="select-style">
  <select>
    <option value="volvo">Option 1</option>
    <option value="saab">Option 2</option>
    <option value="mercedes">Option 3</option>
    <option value="audi">Option 4</option>
  </select>
</div>

希望这对您有所帮助!