Question

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

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

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

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

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

<强> JQuery的：

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

<强> JSFIDDLE

Answer 2

你可以像ul li一样制作

<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 autocomplete在输入关键字后实现下拉选择。

或者

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

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

3 个答案: