Advanced Search

Return to Snippet

Revision: 65278
at November 14, 2013 04:55 by COBOLdinosaur
Initial Code 
CSS:

#styled optgroup {
                            border:1px solid red;
                            margin:10px 8px 10px 8px;
                            padding:10px 5px 0 5px;
                         }
#styled option {
                        padding:2px 15px 2px 12px;
                      }
#styled optgroup option {
                                        padding-left:22px;
                                   }
#optA   {
                color:white;
                background-color:black;
           }
#optA:hover {
                    color:black;
                    background-color:orange;
                   }
#optB   {
                background-image:url(../images/facebook.png);
                background-position:top right;background-repeat:no-repeat;
           }
#optB:hover {
                        background-image:url(../images/dzone.png);
                   }                   
#optB   {
                color:blue;
           }
#optB option:nth-of-type(odd) {
                                                background-color:aqua;
                                             }
#optB:hover option:nth-of-type(odd) {
                                                        color:red;
                                                      }
                                                      
HTML:
<select id="styled" size="15">
    <optgroup id="optA" label="Group A">
        <option value="0">zero</option>
        <option  value="1">One</option>
        <option value="2">Two</option>
    </optgroup>
    <option value="3">Three</option>
    <optgroup id="optB" label="Group B">
        <option value="4">Four</option>
        <option value="4a">B - Four A</option>
        <option value="4b">B- Four B</option>
        <option value="4c">b - Four C</option>
        <option value="5">Five</option>
        <option value="6">Six</option>
    </optgroup>
    <option value="7">Seven</option>
    <option value="8">Eight</option>
    <option value="9">Nine</option>
</select>
Initial URL 
http://coboldinosaur.com/pages/Dynamic_optgroup_Styling.html
Initial Description 
Having a handle for groups of options allows script driven dynamic effects to manage changes of presentation with in the select without having to refresh or use other inefficient methods of updating the display.
Initial Title 
Select Using Styled Optgroup Tags
Initial Tags 
html5
Initial Language 
CSS