Adding a gap in between optgroups-CodePudding

I'm a beginner web developer that has a quick and simple question. I'm trying to figure out the best way to add a gap/space between two optgroups within a single select tag. One solution I found was adding a third, empty optgroup in between them, but am wondering if there is a cleaner approach. I appreciate the help!

Here's an example of how I have it currently working:

<select name="selectionMenu" id="selectionMenu">

    <optgroup label="Section1"></optgroup>

    <optgroup></optgroup>

    <optgroup label="Section2"></optgroup>

</select>

CodePudding user response：

You can also use the disabled attribute for an empty optgroup or option so it doesn't add a blank entry that the user can select:

<optgroup disabled="disabled"></optgroup>

<optgroup>
<option disabled="disabled"></option>
</optgroup>

CodePudding user response：

Try using a <div style="height:5px;"></div> between the option groups to apply a space between them. Adjust the height to your liking. I use this method sometimes to provide a gap between my menu bar across my page and the starting of the text below. It should work in your scenario.