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>

这很好用。但是，在讨论相同的其他问题时，可以理解select是在os级别控制的，我们可以应用于使用css选择框的样式非常小。

如果是这样，我的代码中是否有任何错误与浏览器兼容？我检查过IE9 +，Edge，Mozilla，Chrome，iphone，这个工作正常。所以，我认为我的代码很好。请对此发表评论。

如果我的代码是正确的，它是如何正常工作的，因为根据我的理解，选择不能由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>

希望这有帮助！

使用CSS选择框自定义

1 个答案: