style.css

   div.select[data-multiple] div.header {
    /* display: none; */
  }
  
   div.select div.header {
    content: "↓";
    display: flex;
    flex: 1;
    align-items: center;
    padding: 0;
    position: relative;
    width: auto;
    box-sizing: border-box;
    border-width: 1px;
    border-style: inherit;
    border-color: inherit;
    border-radius: inherit;
  }
  
   div.select div.header::after {
    content: "↓";
    align-self: stretch;
    display: flex;
    align-content: center;
    justify-content: center;
    justify-items: center;
    align-items: center;
    padding: 0.5em;
  }
  
   div.select div.header:hover::after {
    background-color: blue;
  }
  
  .select .header select {
    appearance: none;
    font-family: inherit;
    font-size: inherit;
    padding: 0;
    border-width: 0;
    width: 100%;
    flex: 1;
    display: none;
  }
  
  .select .header select optgroup {
    display: none;
  }
  
  .select select div.option {
    display: none;
  }
  
   div.select {
    user-select: none;
    box-sizing: border-box;
    position: relative;
    border-radius: 4px;
    border-style: solid;
    border-width: 0;
    border-color: gray;
    width: auto;
    display: inline-block;
  }
  
   div.select:focus,
   div.select:hover {
    border-color: blue;
  }
  
   div.select[data-open] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  
   div.select[data-open] datalist {
    display: initial;
  }
  
   div.select datalist {
    appearance: none;
    position: absolute;
    border-style: solid;
    border-width: 1px;
    border-color: gray;
    left: 0;
    display: none;
    width: 100%;
    box-sizing: border-box;
    z-index: 2;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  
   div.select datalist div.option {
    background-color: white;
    margin-bottom: 1px;
    cursor: pointer;
    padding: 0.5em;
    border-width: 0;
  }
  div.select datalist div.option .label{
    pointer-events: none;
  }
   div.select datalist div.option:hover,
   div.select datalist div.option:focus,
   div.select datalist div.option:checked,
   div.select datalist div.option.selected {
    background-color: blue;
    color: white;
  }
  
  html
    body
    form
    fieldset
    div.select
    div.optgroup
    div.option[data-disabled] {
    color: gray;
  }
  
  html
    body
    form
    fieldset
    div.select
    div.optgroup
    div.option[data-checked] {
    background-color: blue;
    color: white;
  }
  
   div.select div.optgroup div.label {
    font-weight: bold;
  }
  
   div.select div.optgroup div.option div.label {
    font-weight: normal;
    padding: 0.25em;
  }
  
   div.select div.header span {
    flex: 1;
    padding: 0.5em;
  }