JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    
    <h2 class="h5">Before &ndash; optgroup header <em>not</em> clickable</h2>
    <select class="form-control" size="10">
      <option>Belleblooms</option>
      <optgroup label="Future Works">
        <option>Var 1</option>
        <option>Var 2</option>
        <option>Var 3</option>  
      </optgroup>
      
      <option>Gemann Solutions</option>
      <optgroup label="Zebra Inc.">
        <option>Option A</option>
        <option>Option B</option> 
      </optgroup>
    </select>

    <h2 class="h5 mt-4">After &ndash; optgroup header <em>is</em> clickable</h2>
    <select class="form-control" size="10">
      <option>Belleblooms</option>
      <optgroup label="Future Works" class="position-relative selectable-optgroup-label">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>  
      </optgroup>
      
      <option>Gemann Solutions</option>
      <optgroup label="Zebra Inc." class="position-relative selectable-optgroup-label">
        <option>Option A</option>
        <option>Option B</option> 
      </optgroup>
    </select>

CSS

body {
  padding: 2rem;
}
optgroup {
  font-weight: normal;
}
optgroup.selectable-optgroup-label > option:first-of-type::after {
  content: ""; 
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1.5rem;
}