Posted By

COBOLdinosaur on 11/14/13

Tagged

html5

Versions (?)

Last Edited at 11/14/13 04:55am

Statistics

Viewed 807 times

Favorited by 0 user(s)

Related snippets

Select Using Styled Optgroup Tags

/ Published in: CSS

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.

Highlighted TextExpand

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>

URL: http://coboldinosaur.com/pages/Dynamic_optgroup_Styling.html

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.