Question

我创建了一个自定义下拉列表，其中显示图像而不是默认箭头。但默认箭头仍然与图像一起出现。这是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>

Answer 1

您可以使用appearance属性。但是有些浏览器只会支持它。 See the available browser support here.

 .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 */
 }

demo

Answer 2

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

要做你想做的事，你应该将一些div元素包含在另一个div内，并自己设置样式，通过Javascript控制它们的行为。

Answer 3

您可以将选择列表的顶部设置为包含溢出隐藏的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;
}

自定义下拉图片而不是默认箭头

3 个答案: