html select and option (html dropdown)

html select and option (html dropdown)

html select and option (html dropdown)

HTML <select> are used to create dropdown list where <option> tag define available option from list's.
Today we will learn how to create html dropdown list and how to design html dropdown using css..

HTML Select option Example:

html select and option (html dropdown)

  <h3>HTML Select</h3>
  <tr>
    <td><span>Country:</span></td>
    <td>
    <select type="text" name="country">
    <option value="">Select Country</option>
       <option value="india">India</option>
    <option value="usa">United States</option>
    <option value="japan">Japan</option>
    <option value="russia">Russia</option>
    </select>
    </td>
 </tr>

HTML DropDown Design using CSS:

html select and option (html dropdown)

HTML Dropdown list css Design example :

  <style>
  span{
  font-weight:bold;
  font-size:20px;
  color:green;
  }
  select {
    padding:3px;
    margin: 0;
 font-size:15px;
 width:185px;
    border-radius:4px;
    background: white;
    color:#888;

    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
}

  </style>
   <tr>
    <td><span>Country:</span></td>
    <td>
    <select type="text" name="country">
    <option value="">Select Country</option>
       <option value="india">India</option>
    <option value="usa">United States</option>
    <option value="japan">Japan</option>
    <option value="russia">Russia</option>
    </select>
    </td>
 </tr>

HTML Dropdown : HTML optgroup Examples:

html select and option (html dropdown)

HTML Dropdown optgroup:

  <style>
  span{
  font-weight:bold;
  font-size:20px;
  color:green;
  }
  select {
    padding:3px;
    margin: 0;
 font-size:15px;
 width:185px;
    border-radius:4px;
    background: white;
    color:#888;

    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
}

  </style>
  <h3>HTML optgroup example:</h3>
   <tr>
    <td><span>Country:</span></td>
    <td>
    <select type="text" name="country">

    <optgroup label="Country">
       <option value="india">India</option>
    <option value="usa">United States</option>
    </optgroup>
    
    <optgroup label="Ocean">
       <option value="indian">Indian Ocean</option>
    <option value="Paicific">Paicific Ocean</option>
    </optgroup>
    <optgroup label="City">
       <option value="Mumbai">Mumbai</option>
    <option value="Kolkata">Kolkata</option>
    </optgroup>
       
    </select>
    </td>
 </tr>

That's it Friends how to create html dropdown list's(select and option tag).
if You like this post please share ..Thank you....