Question

我准备了2张图片来显示我的问题，但是这个网站不允许发布没有声誉的图片。

我花了很多时间试图找到一个简单的基于jquery的解决方案，如何创建一个带有背景图像的组合框。我不需要每个<option>的背景图像，仅适用于组合框本身（第一个选项）。

找不到任何简单的东西（没有~20-30 KB的代码）。上面的例子来自一个网站。我检查了css，js文件，并尝试为我的网站创建相同的文件但是ir只能部分工作，并且它不显示所选文本。

我想要这个： link1 但结果是： link2

有什么想法吗？

CSS

.select2 {
    opacity:0;
    filter:alpha(opacity=0);
    zoom: 1;
}
.select2d {
    background: #fff url('/w18.png') no-repeat center;
    border:1px solid #c4c4c4;
    height: 22px;
    position: relative;
    width: 160px;
}

脚本

$('.select2d').change(function () {
    $('#wall_a').attr('action', $(this).find('select').val());
});

HTML

<form id="wall_a" name="wall_a">
    <div class="select2d">
        <select id="what" class="select2">
            <option value="0">Art</option>
            <option value="1">Artist</option>
            <option value="2">Collection</option>
        </select>
    </div>
</form>

Answer 1

选中此FIDDLE

根据您提供的图像..我希望它与您所寻找的相同......

您需要添加的CSS，

.select2d {
   width: 240px;
   height: 34px;
   overflow: hidden;
   background: url("http://cdn.bavotasan.com/wp-content/uploads/2011/05/down_arrow_select.jpg") no-repeat right #ddd;
   border: 1px solid #ccc;
   }

.select2d select {
   background: transparent;
   width: 200px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
   }

感谢。

Jquery：带背景的组合框

1 个答案: