-2

HTML では、エリア内にウォーター マーク テキストを含むドロップダウン リストを作成する方法を教えてください。

私の要件は、ドロップダウンリストをウォーターマークテキスト付きのテキストボックスのように見せ、隅にリストからデータを選択するための下向き矢印を表示することです。

<select>
  <option value="Class">Class room</option>
  <option value="Ground">Play ground</option>
</select>

これにより、通常のドロップダウン リストが表示されます。ドロップ ダウン リスト ボックスは、スタック オーバー フローの検索フィールドのように、端/隅に矢印マークが付いている必要があります。

4

3 に答える 3

2

次のようなものが必要です。

HTML:

<select id="choice">
    <option value="0" selected="selected">Select...</option>
    <option value="1">Class room</option>
    <option value="2">Play ground</option>
</select>

CSS:

#choice option { color: black; }
.empty { color: gray; }

JQuery:

$("#choice").change(function () {
    if($(this).val() == "0") $(this).addClass("empty");
    else $(this).removeClass("empty")
});
$("#choice").change();

JSFIDDLE

于 2013-04-16T10:48:18.590 に答える
0

HTML 5 を使用している場合は、テキスト ボックス内で placeholder 属性を使用できます。

<input type="text" placeholder="Watermark" />

このjqueryオートコンプリートを使用して、キーワードを入力した後にドロップダウン選択を実現します。

または

<select>
   <option value="" selected="selected">Watermark</option>
   <option value="Class">Class room</option>
   <option value="Ground">Play ground</option>
</select>
于 2013-04-16T10:43:24.683 に答える