Using OptGroups to group options in a Select dropdown

The OptGroup allows you to categorize dropdown options into logical sections, making it easier for a user to scan the list and find the choice they are looking for.

HTML

<h3>With OptGroups:</h3>
<Label>Choose a class:<select>
 <option class="category" value="" th:disabled="disabled" selected="selected">Choose an Account</option>
    <optgroup label="Math">
        <option>Algebra</option>
        <option>Calculus</option>
        <option>Discrete Math</option>
        <option>Linear Algebra</option>
        <option>Differential Equations</option>
    </optgroup>
    <optgroup label="Science">
        <option>Physics 1</option>
        <option>Physics 2</option>
        <option>Physics 3</option>
        <option>Chemistry</option>
        <option>Quantum Mechanics</option>
    </optgroup>
    </select>

CSS

body {
 margin-left: 10px;  
 margin-right: 10px;   
}
h3 { 
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: bold;
}

input, checkbox{
    margin-left: 10px; 
    margin-bottom: 10px;    
}