javascript - 如何创建一个带有水印文本的下拉列表

Question

在 HTML 中，如何在区域内创建带有水印文本的下拉列表。

我的要求是让下拉列表看起来像一个带有水印文本的文本框，在角落有一个向下箭头，用于从列表中选择数据。

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

这给了我一个正常的下拉列表。下拉列表框应该像 stackover 流中的 serach 字段一样，在末尾/角处带有箭头标记。

Answer 1

你需要这样的东西：

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

查询：

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

JSFIDDLE

Answer 2

你可以在 ul li like

<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>

给李背景图片像

div ul li{background:url(arrow.png) no-repeat;}

Answer 3

如果您使用的是 HTML 5，则可以在文本框中使用占位符属性。

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