select要素内のoption要素にCSSを当てて、キーボード操作も可能にする（Tom Select）

<!-- Tom Select使用｜CSSアレンジ -->
      <div class="select__wrap select__wrap--css">
        <h2 class="select__title">CSSアレンジ（Tom Select使用）</h2>
        <select id="select__css" class="select" name="select_test_css" autocomplete="off">
          <!-- ↓ valueの値を空にすることで、placeholderのように扱える｜Tom Select -->
          <option value="">選択して下さい</option>
          <option value="ここに">ここに</option>
          <option value="CSSが">CSSが</option>
          <option value="効く！">効く！</option>
          <option value="そう、">そう、</option>
          <option value="Tom Selectならね。">Tom Selectならね。</option>
        </select>
      </div>

<!-- Tom Select使用｜グループ分け -->
      <div class="select__wrap">
        <h2 class="select__title">グループ分け・タイトル・画像（Tom Select使用）</h2>
        <p>【例】島根県について知っていることを選択してください。（３つまで）</p>
        <select id="select__group" class="select" name="select_test_charas" autocomplete="off">
          <option value="">選択して下さい</option>
        </select>
      </div>

/* リセットCSS ------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #fff;
}

/* アクセシビリティ用 ------------------------------- */
/* マウスクリック操作の場合は ouline を消し、キーボード操作の場合は outline を表示する場合 */
:focus:not(:focus-visible) {
  outline: 0;
}

/* アウトライン表示 */
:focus-visible,
.ts-wrapper.focus {
  outline: 2px solid red;
  outline-offset: 0;
}

/* -------------------------------------------------------------------- */
/*
/* Tom Select用CSS
/* -------------------------------------------------------------------- */

// セレクトボックスCSS
.ts-control {
  display: flex; // select欄、文字中央
  align-items: center;
  padding-left: 1em;
}

// ドロップダウンCSS
.ts-dropdown {
  margin-top: 0.2rem;

  // 画像配置時のテキスト位置
  .option {
    display: flex;
    align-items: center;
  }
}

.ts-control {

  // 画像配置時のテキスト位置
  .item {
    display: flex;
    align-items: center;
  }
}

// 文字関連
.ts-control,
.ts-control input,
.ts-dropdown {
  font-smoothing: inherit;
  color: #333;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
}

// グループのタイトル
.ts-dropdown .optgroup-header {
  font-size: 20px;
  font-weight: bold;
  background-color: cornsilk;
  padding-top: 30px;
  padding-bottom: 10px;
  padding-left: 15px;
}

(function () {

// CSSアレンジ用のJS
  new TomSelect('#select__css');

// グループ分け用のJS
  new TomSelect('#select__group', {
    maxItems: 3, // 最大３つまで選択できる
    options: [ // option要素のデータ
      { class: 'area', src: 'https://picsum.photos/500/500', value: '足立美術館（安来市古川町）' },
      { class: 'area', src: 'https://picsum.photos/500/500', value: '出雲大社（出雲市大社町）' },
      { class: 'area', src: 'https://picsum.photos/500/500', value: '松江城（松江市殿町）' },
      { class: 'area', src: 'https://picsum.photos/500/500', value: '海洋館アクアス（浜田市久代町）' },
      { class: 'area', src: 'https://picsum.photos/500/500', value: '由志園（松江市八束町）' },
      { class: 'goods', src: 'https://picsum.photos/500/500', value: '宍道湖の殻つきしじみ' },
      { class: 'goods', src: 'https://picsum.photos/500/500', value: 'しじみ佃煮' },
      { class: 'goods', src: 'https://picsum.photos/500/500', value: '出雲そば' },
      { class: 'goods', src: 'https://picsum.photos/500/500', value: 'のどぐろ加工品' },
      { class: 'goods', src: 'https://picsum.photos/500/500', value: 'あご野焼' }
    ],
    optgroups: [ // グループのタイトル
      { value: 'area', label: '島根県の観光地' },
      { value: 'goods', label: '島根県の特産品' }
    ],
    optgroupField: 'class', // 項目をグループ化するデータ名
    labelField: 'value', // labelとして表示するデータ名
    searchField: ['value'], // オプションをフィルタリングする際のデータ名
    render: {
      option: function (data, escape) { // ドロップダウン内リストを生成
        return '<div>' + '<img src="' + escape(data.src) + '">' + escape(data.value) + '</div>';
      },
      item: function (data, escape) { // 選択された項目を生成
        return '<div>' + '<img src="' + escape(data.src) + '">' + escape(data.value) + '</div>';
      },
      optgroup_header: function (data, escape) { // グループのタイトルを生成
        return '<div class="optgroup-header">' + escape(data.label) + '</div>';
      },
    }
  });

}());