自定义下拉图标代替默认箭头

custom drop down with image instead of default arrow

本文关键字：默认 图标 自定义      更新时间：2023-09-26

我创建了一个自定义下拉菜单，显示图像而不是默认箭头。但是默认的箭头仍然和图像一起出现。这是jsfiddle http://jsfiddle.net/6pLJf/.

这是我的代码。

<div class="row">
    <div class="col-sm-12">
        <select name="country" class="form-control SearchBar">
            <option value="opt1">option 1</option>
            <option value="opt2">option 2</option>
            <option value="opt3">option 3</option>
            <option value="opt4">option 4</option>
            <option value="opt5">option 5</option>
        </select>
    </div>
</div>
<style>
.SearchBar {
    height: 45px;
    font-family: 'gess_two_Light' !important;
    font-size: 19px;
    border-radius: 5px;
    display: block;
    border: 1px solid #B2B2B2;
    background-image: url(image.jpg);
    background-repeat: no-repeat;
    background-position: right 10px center, left 10px center;
    padding-right: 35px;
}
</style>

可以使用appearance属性。但有些浏览器只有它才会支持。在这里查看可用的浏览器支持

 .SearchBar {
height: 45px;
font-family: 'gess_two_Light' !important;
font-size: 19px;
border-radius: 5px;
display: block;
border: 1px solid #B2B2B2;
background-image: url(image.jpg);
background-repeat: no-repeat;
background-position: right 10px center, left 10px center;
padding-right: 35px;
appearance:none;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari and Chrome */
 }

您不能实际编辑下拉菜单的外观，因为它是由浏览器创建的，每个浏览器都有自己的布局。没有CSS属性或JS函数来编辑下拉菜单。

要做你想做的，你应该包装一些div元素独立于另一个div和样式他们自己，通过Javascript控制他们的行为。

您可以通过将选择列表包装在隐藏溢出的div中并强制其比该div更宽来样式化它的顶部。然后您可以将样式应用于包装器div，它看起来像您想要的。

唯一的限制是你不能为列表本身设置样式，只能为列表的顶部设置样式。

也有很多插件，你可以使用或编写自己的。

如果你想在上面这样做，这里有一个提琴:

http://jsfiddle.net/Lg878/1/

主代码如下:

HTML
<div class="select-wrapper">
    <select name="country" class="form-control SearchBar">
        <option value="opt1">option 1</option>
        <option value="opt2">option 2</option>
        <option value="opt3">option 3</option>
        <option value="opt4">option 4</option>
        <option value="opt5">option 5</option>
    </select>
</div>

和

CSS
.select-wrapper {
    height: 45px;
    border-radius: 5px;
    display: block;
    border: 1px solid #B2B2B2;
    width:100px;
    overflow:hidden;
}
.SearchBar {
    width:120px;
    padding-right: 35px;
    display:block;
    border:none;
    height: 43px;
}
相关文章：