how to create a drop down list with watermark text inside

Question

In HTML how do you create a drop down list with water mark text inside the area.

My requirement is to have a drop down list look like a text box with watermark text, at the corner a down-word arrow for selecting the data from list.

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

This is giving me a normal dropdown list. Drop down list box should like serach field in stackover flow with a arrow mark at end/corner.

@user2086641: I think you mean placeholder of watermark, yes? — Majid Abarghooei, Apr 16 '13 at 10:51

score 2 · Accepted Answer · answered Apr 16 '13 at 10:48

you need something like this:

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

score 1 · Answer 2 · answered Apr 16 '13 at 10:35

1

You can make in ul li like

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

give the li background image like

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

answered Apr 16 '13 at 10:35

Akhil Thesiya

942
5
7

score 0 · Answer 3 · answered Apr 16 '13 at 10:43

If you're using HTML 5, you can use placeholder attribute inside the text box.

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

and use this jquery autocomplete to achieve drop down selection after entered a keyword.

Or

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

how to create a drop down list with watermark text inside

3 Answers3