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;
}

当我这样做时，下拉列表不再下降，但它带有水印......我在这里做错了什么？

顺便说一句-这在 chrome 中已损坏，但只有在我双击该元素时才能在 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 代码将遍历未禁用的选项并使它们变黑。Then, when the selection changes, it will remove the grayclass making the dropdown box black (default) as well.

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 回答