title: how to create a drop down list with watermark text inside
body: <p>In HTML how do you create a drop down list with water mark text inside the area.</p>
  
  <p>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.</p>
  
  <pre><code>&lt;select&gt;
    &lt;option value="Class"&gt;Class room&lt;/option&gt;
    &lt;option value="Ground"&gt;Play ground&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>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.</p>