HTML Select Options

by Ayyappan Sakthivadivel

HTML

<h3>Testing</h3>
<select>
  <option value="A">A-test</option>
  <option value="B">B-test</option>
  <option value="C">C-test</option>
</select>

<h3 style="margin-top: 100px;">Single Select</h3>
<select id="ddlProducts">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

<h3>Multi Select</h3>
<select multiple="multiple">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>



<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'>
    Further Reading:
    <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select'>
        MDN - <code>&lt;select&gt;</code>
    </a>
</div>

CSS

select {
  width: 100px;
  cursor: pointer;
}

#ddlProducts *{
 border-radius:15px;
 background-color:#00ff00;
 color: #fff;
 margin: 20px 0;
}