2

わかりました、これは私をやや狂わせています。ドロップダウン付きの基本的なHTMLページがあります。

<select id="someDropDown" class="watermarked">
   <option value="">Please Select</option>
   <option>Item 1</option>
   <option>Item 2</option>
</select>

このjQueryプラグインを使用すると、選択リストに透かしを入れることができます。

http://archive.plugins.jquery.com/project/TinyWatermark

これは私のjQueryです：

$(document).ready(function() {
    $('.watermarked').watermark('watermark', 'derp');
});

このcssスタイルで：

.watermark 
{
    color: #999;
}

これを行うと、ドロップダウンはドロップしなくなりますが、透かしが入ります...ここで何が間違っているのですか？

ところで-これはクロムで壊れていますが、要素をダブルクリックした場合にのみIE9で機能します。

4

1 に答える 1

3

選択でそれができるかどうかはわかりません。デモを見ると、すべてテキスト入力フィールド用です。これは通常、プレースホルダー テキストがどのように機能するかです。

ただし、これを試してください。「選択してください」項目を無効にするため、リストを開くと灰色になり、再度選択することはできません。ただし、これは通常、色を変更しません。

<select id="someDropDown" class="watermarked">
   <option disabled selected>Please Select</option>
   <option>Item 1</option>
   <option>Item 2</option>
</select>

jQuery ソリューション

[選択してください] オプションに属性がdisabled selectedあり、選択全体にgrayクラスがあることを確認してください。これにより、ページに表示されるドロップダウン ボックスのスタイルがグレーのフォント カラーになります。jQuery コードは、無効になっていないオプションを繰り返し処理し、それらを黒くします。次に、選択が変更されると、grayクラスが削除され、ドロップダウン ボックスも黒 (デフォルト) になります。

CSS

.gray {
    color:#ccc;
}

HTML

<select id="someDropDown" class="watermarked gray">
   <option disabled selected>Please Select</option>
   <option>Item 1</option>
   <option>Item 2</option>
</select>

JS

$("#someDropDown option:not([disabled])").css("color", "#000");
$("#someDropDown").change(function() {
    $(this).css('gray');
});

デモ

于 2012-07-12T19:11:00.703 に答える