こんにちは！
上毛印刷WEB制作担当のソーヤです。

今回は、意外に使用頻度が多そうなtipsを紹介します。

ある日、お問い合わせフォームのコーディングをしようと思い、
デザイナーから送られてきたデザインデータを見ると、
selectタグの選択肢にまでデザイン指定がありました。

これってコーダーにとって結構面倒で、
selectタグのスタイルは各ブラウザ依存で、
思い通りにカスタマイズするためにはかなりの労力が必要でした。

ですが、このライブラリを使用するとjQueryにも頼らずに簡単に、
selectのスタイルをカスタマイズできます！

◆公式サイト（別タブで開きます）
https://slimselectjs.com/

実装例

AH-J-124 BASHOHD-011 MELANDERHD-033M VERRILLHD-012 MELANDER C3DF-HD-08 TIAN-QIANGVP-44SVP-44DIB-C03H: HAL 826
AL-J-121 BASHOLG-011 MELANDERLG-012 MELANDER C3DF-LG-08 TIAN-QIANGVP-422NACHTREIHER/42E2C-2000 CRAWLERIB-C03L: HAL 826

HTML例

<script src="https://unpkg.com/slim-select@latest/dist/slimselect.min.js"></script>
<link href="https://unpkg.com/slim-select@latest/dist/slimselect.css" rel="stylesheet"></link>

まず、上記コードを＜head＞内に記述してください。

そうしたら、下記コードを＜body＞内に記述してください。

<select name="" id="js-select">
  <optgroup label="頭部パーツ">
    <option value="AH-J-124 BASHO">AH-J-124 BASHO</option>
    <option value="HD-011 MELANDER">HD-011 MELANDER</option>
    <option value="HD-033M VERRILL">HD-033M VERRILL</option>
    <option value="HD-012 MELANDER C3">HD-012 MELANDER C3</option>
    <option value="DF-HD-08 TIAN-QIANG">DF-HD-08 TIAN-QIANG</option>
    <option value="VP-44S">VP-44S</option>
    <option value="VP-44D">VP-44D</option>
    <option value="IB-C03H: HAL 826">IB-C03H: HAL 826</option>
  </optgroup>
  <optgroup label="二脚パーツ">
    <option value="AL-J-121 BASHO">AL-J-121 BASHO</option>
    <option value="LG-011 MELANDER">LG-011 MELANDER</option>
    <option value="LG-012 MELANDER C3">LG-012 MELANDER C3</option>
    <option value="DF-LG-08 TIAN-QIANG">DF-LG-08 TIAN-QIANG</option>
    <option value="VP-422">VP-422</option>
    <option value="NACHTREIHER/42E">NACHTREIHER/42E</option>
    <option value="2C-2000 CRAWLER">2C-2000 CRAWLER</option>
    <option value="IB-C03L: HAL 826">IB-C03L: HAL 826</option>
  </optgroup>
</select>

CSS例

.ss-option{
  background-color: #fff;
}
.ss-content .ss-list .ss-option{
  position: relative;
}
.ss-content .ss-list .ss-option::before{
  content: '';
  position: absolute;
  left: 10px;
  top: 11px;
  box-sizing: border-box;
  width: 4px;
  height: 4px;
  border: 4px solid transparent;
  border-left: 6px solid #12bb50;
  display: none;
}
.ss-content .ss-list .ss-option:hover{
  color:#333;
  background-color:#f6faf7;
}
.ss-content .ss-list .ss-option:hover::before{
  display: block;
}
.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected{
  color:#333;
  background-color:#e2f7ea;
}
.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected::before{
  display: block;
}

JavaScript例

new SlimSelect({
  select: '#js-select'
})

まとめ

今回もjQueryではなく、Vanilla.jsで実装してみました。

コピペしてガンガン使ってください！