0

我准备了 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>
4

1 回答 1

0

检查这个小提琴

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

你需要添加的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;
   }

谢谢。

于 2013-03-29T13:05:16.317 回答