| <!DOCTYPE html> |
| <html> |
| <head> |
| <style type="text/css"> |
| optgroup:disabled { color: pink; } |
| optgroup:enabled { color: green; } |
| option:disabled { color: red; } |
| option:enabled { color: blue; } |
| </style> |
| </head> |
| <body> |
| <form> |
| <select size="20"> |
| <optgroup label="Enabled"> |
| <option value="listbox_e11">One</option> |
| <option value="listbox_e12">Two</option> |
| <option value="listbox_e13">Three</option> |
| <option value="listbox_e14">Four</option> |
| </optgroup> |
| <optgroup label="Disabled" disabled> |
| <option value="listbox_d1">One</option> |
| <option value="listbox_d2">Two</option> |
| <option value="listbox_d3">Three</option> |
| <option value="listbox_d4">Four</option> |
| </optgroup> |
| <optgroup label="Enabled2"> |
| <option value="listbox_e21">One</option> |
| <option value="listbox_e22" disabled>Two</option> |
| <option value="listbox_e23" selected>Three</option> |
| <option value="listbox_e24">Four</option> |
| </optgroup> |
| </select> |
| <br /> |
| <select size="1"> |
| <optgroup label="Enabled"> |
| <option value="listbox_e1">One</option> |
| <option value="listbox_e2">Two</option> |
| <option value="listbox_e3">Three</option> |
| <option value="listbox_e4">Four</option> |
| </optgroup> |
| <optgroup label="Disabled" disabled> |
| <option value="menulist_d1">One</option> |
| <option value="menulist_d2">Two</option> |
| <option value="menulist_d3">Three</option> |
| <option value="menulist_d4">Four</option> |
| </optgroup> |
| <optgroup label="Enabled2"> |
| <option value="listbox_e21">One</option> |
| <option value="listbox_e22" disabled>Two</option> |
| <option value="listbox_e23" selected>Three</option> |
| <option value="listbox_e24">Four</option> |
| </optgroup> |
| </select> |
| </form> |
| </body> |
| </html> |
