1

<select>Google で以下に示すようなボックスを作成したいと思います。

Google セレクト ボックス

私はそれを正しくスタイリングするのにかなり苦労しています。プラグインまたは解決策を知っている人はいますか?

4

3 に答える 3

4

プラグインについてはわかりませんが、独自に作成したプラグインのソリューションのアイデアを提供できます。

まず、次のような HTML を作成します。

<div class="customDropdown">Month<span><img src="littlearrows.jpg" /></span></div>
<div id="customList">
    <ul>
        <li>January</li>
        <li>February</li>
        <li>March</li>
        <li>...etc.</li>
    </ul>
</div>

次に、CSS を使用して div のスタイルを設定し、customDropdown を希望どおりに作成し、customList を非表示にします。また、おそらくスクロール バーが右側にある 4 行のみを表示するようにします (カスタムまたは brwozer のいずれかを選択します)。 .

その後、リストの動作を追加する jQuery または Javascript コードを作成します。ユーザーが月を選択したときに値を抽出できるように、各月のエントリに ID を指定する必要がある場合があります。

重要な注意：これは単なるアイデアです。私は同様のことをしましたが、完全な解決策を提供しているわけではありません。このアイデアを変更/修正したり、破棄したりすることもできますが、これが私がアプローチする方法です.

于 2012-11-06T06:35:59.500 に答える
2

Chosen プラグインを試してください。あなたが示しているものとまったく同じようには見えませんが、調査する価値のある多くの機能があります

于 2012-11-06T07:08:41.797 に答える
0

彼らのスタイルの Google の公開リリースはありません。CSS だけでなく JavaScript も必要なので、コピーするのは簡単ではありません。ファンデーションのような UI 要素を作成する方法はたくさんあります。たとえば、Foundation などです。

于 2012-11-06T07:11:07.113 に答える