0

問題を示すために 2 つの画像を用意しましたが、この Web サイトでは評判のない画像を投稿することは許可されていません。

背景画像付きのコンボボックスを作成する簡単なjqueryベースのソリューションを見つけるのに何時間も費やしました。<option>コンボボックス自体（最初のオプション）のためだけに、各の背景画像は必要ありません。

単純なものが見つかりません (〜 20 ～ 30 KB のコードなし)。上記の例は、ある Web サイトからのものです。css、js ファイルを確認し、自分の Web サイト用に同じものを作成しようとしましたが、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 に答える