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)

?

1 2 3 4 5 6 7 8 9 10 11 12 13

<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 :

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

<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:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

<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....