【javascript】オリジナルのセレクトボックスを作ろう！createselectbox関数のカスタマイズ方法

スタイルのカスタマイズとセレクトボックスのデザイン変更
参考記事:
【Javascript】関連のまとめ
オンラインスクールを講師として活用する！
0円でプログラミングを学ぶという選択

スタイルのカスタマイズとセレクトボックスのデザイン変更

セレクトボックスは、ウェブページでよく使用される要素の一つですが、デフォルトのデザインがあまり洗練されていないことが多くあります。そこで、オリジナルのセレクトボックスを作成し、デザインをカスタマイズする方法を紹介します。

セレクトボックスのデザインをカスタマイズするためには、cssを使用します。以下のようにcssを追加することで、セレクトボックスのスタイルを変更することができます。

<style>
.custom-select {
  position: relative;
  display: inline-block;
  background-color: #f1f1f1;
  border-radius: 4px;
  padding: 5px;
}
.custom-select select {
  display: none;
}
.custom-select select option {
  padding: 10px;
}
.custom-select .select-selected {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 5px;
}
.custom-select .select-selected:after {
  content: '▼';
  font-size: 12px;
  margin-left: 5px;
}
.custom-select .select-items {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  border-radius: 4px;
}
.custom-select .select-items div {
  padding: 10px;
  cursor: pointer;
}
.custom-select .select-items div:hover {
  background-color: #888;
  color: #fff;
}
</style>

このcssでは、.custom-selectクラスがセレクトボックスの親要素を指定しています。その下にあるselect要素は非表示にしておきます。.select-selectedクラスは、選択されたオプションを表示する要素です。

カスタマイズしたスタイルを適用するためには、htmlのセレクトボックスの要素に.custom-selectクラスを付ける必要があります。

<div class="custom-select">
  <select>
    <option value="option1">option 1</option>
    <option value="option2">option 2</option>
    <option value="option3">option 3</option>
  </select>
  <div class="select-selected">選択してください</div>
  <div class="select-items">
    <div>option 1</div>
    <div>option 2</div>
    <div>option 3</div>
  </div>
</div>

上記のhtmlコードでは、セレクトボックスのデフォルトの見た目を非表示にし、代わりにカスタマイズした見た目を.select-selected要素に表示しています。クリックすることで、.select-items要素が表示され、その中から選択ができるようになっています。

スタイルのカスタマイズ方法は、cssを自由に編集することで可能です。例えば、背景色や文字色の変更、選択したオプションのスタイルの変更など、様々なカスタマイズが可能です。