【css】セレクトボックスのカスタマイズ

※ 当サイトではアフィリエイト広告を利用しています。

セレクトボックスのカスタマイズ例です。

デフォルトのセレクトボックス、そしてカスタマイズ例を2例ほどご紹介します。

サンプル例はこちらからご覧ください。

デフォルトのセレクトボックス

htmlはこちら。

<select name="Select" id="Select">
 <option value="all">All</option>
 <option value="one">one</option>
 <option value="two">two</option>
 <option value="three">three</option>
 <option value="four">four</option>
</select>

デフォルトのサンプル例に加えたcssはこれだけ。

.select_01 select{
  padding:5px;
  outline: none;
}

カスタマイズ①

htmlはこちら。

<div class="select-box">
  <select name="Select" id="Select">
    <option value="all">All</option>
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
    <option value="four">four</option>
 </select>
</div>

セレクトボックスをdivタグで囲みます。

selectで生成されるデフォルトのボックスを表示させないで、全体を囲んだdivタグに対してcssをあてて、セレクトボックスを表示させます。

cssはこちら。

.select_02 .select-box {
  width: 270px; 
  position: relative;
}
.select_02 .select-box select {
  outline: none;
  -webkit-appearance: none;
  appearance: none;  
  background: transparent;
  width: 100%;
  border: 2px solid #003686;
  border-radius: 5px; 
  padding: 5px 35px 5px 10px;
  cursor: pointer;  
}
.select_02 .select-box select::-ms-expand {/* for IE */
  display: none;
}
.select_02 .select-box::before {
  position: absolute;
  top:0;
  right:0;
  content: '';
  width: 30px;
  height: 100%;
  background: #003686;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  pointer-events: none;
}
.select_02 .select-box::after {
  position: absolute;
  top:40%;
  right:7px;
  content:'';
  width: 7px;
  height: 7px;
  border-left: #fff solid 2px;
  border-bottom: #fff solid 2px;
  transform: rotate(-45deg) translateY(-50%);
  pointer-events: none;
}

appearance: none; (-webkit-appearance: none;)でデフォルトのセレクトボックスの装飾（枠線や矢印）を消します。そして、全体を囲んだdivタグ(.select-box)の::before,::after要素を利用して装飾しています。

カスタマイズ②

ついでに上下矢印のもの。htmlはカスタマイズ①と同じです。

以下css。

.select_03 .select-box {
  width: 270px;
  position: relative;
  background: #E6E6E5;
}
.select_03 .select-box select {
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;  
  appearance: none;
  background: transparent;
  width: 100%;
  border: 2px solid #003686;
  border-radius: 5px;
  padding: 5px 35px 5px 10px;
  cursor: pointer;
}
.select_03 .select-box select::-ms-expand {
  display: none;
}
.select_03 .select-box::before {
  position: absolute;
  bottom: 0.6em;
  right: 0.8em;
  width: 0;
  height: 0;
  padding: 0;
  content: '';
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #003686;
  pointer-events: none;
}
.select_03 .select-box::after {
  position: absolute;
  top: 0.6em;
  right: 0.8em;
  width: 0;
  height: 0;
  padding: 0;
  content: '';
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #003686;
  pointer-events: none;
}

サンプル例はこちらからご覧ください。