1

モバイル Web サイトを作成していて、単純なドロップダウン リストをボタンのようにスタイル設定したいと考えています。ボタン内に背景画像を入れたい。

その目的はリストビューをソートすることなので、オプションメニューにソートを示すテキスト付きのソートアイコンが必要です

<select>
  <option>ASC</option>
  <option>DESC</option>
  <option>Price</option>
</select>

これは可能ですか？jQuery Mobile で使用されているのを見たことがありますが、このフレームワークは使用していません。純粋な html/css のみです。

4

3 に答える 3

1

これを行う方法はいくつかありますが、いずれも JavaScript が必要です。

最も簡単な方法は、この手法を使用することです。これは基本的に選択要素を透明に設定し、カスタムの「ボタン」要素の上に配置します。ボタンをクリックすると、実際には透明な選択要素をクリックしているため、要素が開きます。

その他の最も複雑で強力なソリューションには、次のものがあります。

于 2013-05-20T22:05:31.510 に答える
0

これはカスタム フォント プロジェクト (ドロップダウン) 用に作成したもので、非常に使いやすく、使用できるアプリケーションがたくさんあります。オプションレベルで要求していることを実行する方法はありません (たとえば、色について)。ここにリンクがあります。お役に立てば幸いです。

http://jsfiddle.net/cornelas/mAz3c/

共通CSS

select option {
 background: red;
}
于 2013-05-20T21:28:59.160 に答える
0

これはハックかもしれませんが、探しているものに似ているかもしれません。JSなしでドロップダウンを実行できる例、その例はたくさんあります。

ただし、「li」タグに必要なものをすべて挿入して、適切にスタイルを設定できます。

もちろん、ポジショニングでは、さまざまなビューポート間で柔軟なものを使用する場合、どこに移動する必要があるかを知ることができる必要があります.

スタイリングも明らかに作業が必要です。

http://jsfiddle.net/uNhaX/

<ul>
    <li id="first"><img src="http://jsfiddle.net/img/logo.png" /><ul id="second">
        <li id="asc">Asc</li>
        <li id="desc">Desc</li>
        </ul>
    </li>
</ul>
于 2013-05-20T22:41:06.610 に答える