<label for="comp-price-filter">Select the price range of your next computer</label>
<select class="price-filter" name="comp-price-filter" id="comp-price-filter">
    <optgroup label="Low End">
        <option value="100-300">$100 - $300</option>
        <option value="301-500">$301 - $500</option>
        <option value="501-700">$501 - $700</option>
    </optgroup>
    <optgroup label="Middle Range">
        <option value="701-1200">$701 - $1200</option>
        <option value="1201-1600">$1201 - $1600</option>
    </optgroup>
    <optgroup label="High End">
        <option value="1600-2500">$1600 - $2500</option>
        <option value="2501-3200">$2501 - $3200</option>
    </optgroup>
</select>
body {
  color: #333;
  font-family: Tahoma, sans-serif;
  font-size: 16px;
  line-height: 1.25;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.