Select mit unterschiedlichen Optgroups

by Jens Grochtdreis

HTML

<select name="some_name" id="some_name" size="1">
    <optgroup label="Group 1">
        <option value="option1">option1</option>
        <option value="option2" class="einrueckung1">option2</option>
        <option value="option3" class="einrueckung2">option3</option>
    </optgroup>

    <optgroup label="Group 2">
        <option value="option4">option4</option>
        <option value="option5">option5</option>
        <option value="option6" class="einrueckung1">option6</option>
        <option value="option7" class="einrueckung2">option7</option>
        <option value="option8" class="einrueckung1">option8</option>
        <option value="option9" class="einrueckung1">option9</option>
    </optgroup>

    <optgroup label="Group 3">
        <option value="option10">option10</option>
        <option value="option11">option11</option>
        <option value="option12">option12</option>
        <option value="option13">option13</option>
    </optgroup>

</select>

CSS

/* styling basics */
html {padding: 20px 0; background-color: #efefef;}
body {width: 80%; padding: 40px; margin: 0 auto; background: #fff; box-shadow: 1px 1px 5px rgba(0,0,0,0.5); font-family: Verdana, Arial, sans-serif; font-size: 14px;}

.einrueckung1 {
   padding-left: 20px;
    color: red;
}

.einrueckung2 {
   padding-left: 40px;
    color: red;
}