
HTML・CSSでつくるセレクトボックスのデザイン6選
フォームとして沢山の選択肢を表示するのに最適なセレクトボックス。今回はそんなセレクトボックス(プルダウン)のおしゃれなデザインをまとめました。どれもコピペだけで再現できるものなので、ぜひ取り入れてみてください。
カラフルなセレクトボックス
フラット
step1
デザインを調整する
step2
HTMLをコピペする
HTML
<label class="selectbox-001">
<select>
<option>optionの例1</option>
<option>optionの例2</option>
<option>optionの例3</option>
</select>
</label>
step3
CSSをコピペする
CSS
.selectbox-001 {
position: relative;
}
.selectbox-001::before,
.selectbox-001::after {
position: absolute;
content: '';
pointer-events: none;
}
.selectbox-001::before {
display: inline-block;
right: 0;
width: 2.8em;
height: 2.8em;
border-radius: 0 3px 3px 0;
background-color: #2589d0;
}
.selectbox-001::after {
position: absolute;
top: 50%;
right: 1.4em;
transform: translate(50%, -50%) rotate(45deg);
width: 6px;
height: 6px;
border-bottom: 3px solid #fff;
border-right: 3px solid #fff;
}
.selectbox-001 select {
appearance: none;
min-width: 230px;
height: 2.8em;
padding: .4em 3.6em .4em .8em;
border: none;
border-radius: 3px;
background-color: #e6edf3;
color: #333;
font-size: 1em;
cursor: pointer;
}
.selectbox-001 select:focus {
outline: 2px solid #2589d0;
}
枠線あり
step1
デザインを調整する
step2
HTMLをコピペする
HTML
<label class="selectbox-002">
<select>
<option>optionの例1</option>
<option>optionの例2</option>
<option>optionの例3</option>
</select>
</label>
step3
CSSをコピペする
CSS
.selectbox-002 {
position: relative;
}
.selectbox-002::before,
.selectbox-002::after {
position: absolute;
content: '';
pointer-events: none;
}
.selectbox-002::before {
right: 0;
display: inline-block;
width: 2.8em;
height: 2.8em;
border-radius: 0 3px 3px 0;
background-color: #2589d0;
content: '';
}
.selectbox-002::after {
position: absolute;
top: 50%;
right: 1.4em;
transform: translate(50%, -50%) rotate(45deg);
width: 6px;
height: 6px;
border-bottom: 3px solid #fff;
border-right: 3px solid #fff;
content: '';
}
.selectbox-002 select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
min-width: 230px;
height: 2.8em;
padding: .4em 3.6em .4em .8em;
border: 2px solid #2589d0;
border-radius: 3px;
color: #333333;
font-size: 1em;
cursor: pointer;
}
.selectbox-002 select:focus {
outline: 1px solid #2589d0;
}
シンプルなセレクトボックス
スタンダード
step1
デザインを調整する
step2
HTMLをコピペする
HTML
<label class="selectbox-003">
<select>
<option>optionの例1</option>
<option>optionの例2</option>
<option>optionの例3</option>
</select>
</label>
step3
CSSをコピペする
CSS
.selectbox-003 {
display: inline-flex;
align-items: center;
position: relative;
}
.selectbox-003::after {
position: absolute;
right: 15px;
width: 10px;
height: 7px;
background-color: #535353;
clip-path: polygon(0 0, 100% 0, 50% 100%);
content: '';
pointer-events: none;
}
.selectbox-003 select {
appearance: none;
min-width: 230px;
height: 2.8em;
padding: .4em calc(.8em + 30px) .4em .8em;
border: 1px solid #cccccc;
border-radius: 3px;
background-color: #fff;
color: #333333;
font-size: 1em;
cursor: pointer;
}
スタンダード×矢印2つ
step1
デザインを調整する
step2
HTMLをコピペする
HTML
<label class="selectbox-006">
<select>
<option>optionの例1</option>
<option>optionの例2</option>
<option>optionの例3</option>
</select>
</label>
step3
CSSをコピペする
CSS
.selectbox-006 {
position: relative;
}
.selectbox-006::before,
.selectbox-006::after {
position: absolute;
right: 15px;
width: 9px;
height: 6px;
background-color: #535353;
content: '';
pointer-events: none;
}
.selectbox-006::before {
top: calc(50% - 9px);
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.selectbox-006::after {
bottom: calc(50% - 9px);
clip-path: polygon(0 0, 50% 100%, 100% 0);
}
.selectbox-006 select {
appearance: none;
min-width: 230px;
height: 2.8em;
padding: .4em calc(.8em + 30px) .4em .8em;
border: 1px solid #cccccc;
border-radius: 3px;
background-color: #fff;
color: #333333;
font-size: 1em;
cursor: pointer;
}
下線のみ
step1
デザインを調整する
step2
HTMLをコピペする
HTML
<label class="selectbox-005">
<select>
<option>optionの例1</option>
<option>optionの例2</option>
<option>optionの例3</option>
</select>
</label>
step3
CSSをコピペする
CSS
.selectbox-005 {
display: inline-flex;
align-items: center;
position: relative;
}
.selectbox-005::after {
position: absolute;
right: 15px;
width: 10px;
height: 7px;
background-color: #535353;
clip-path: polygon(0 0, 100% 0, 50% 100%);
content: '';
pointer-events: none;
}
.selectbox-005 select {
appearance: none;
min-width: 230px;
height: 2.8em;
padding: .4em calc(.8em + 30px) .4em .8em;
border: none;
border-bottom: 2px solid #cccccc;
background-color: #fff;
color: #333333;
font-size: 1em;
cursor: pointer;
}
.selectbox-005 select:focus {
outline: none;
}

白背景×シャドウ
step1
デザインを調整する
step2
HTMLをコピペする
HTML
<label class="selectbox-004">
<select>
<option>optionの例1</option>
<option>optionの例2</option>
<option>optionの例3</option>
</select>
</label>
step3
CSSをコピペする
CSS
.selectbox-004 {
display: inline-flex;
align-items: center;
position: relative;
}
.selectbox-004::after {
position: absolute;
right: 15px;
width: 10px;
height: 7px;
background-color: #535353;
clip-path: polygon(0 0, 100% 0, 50% 100%);
content: '';
pointer-events: none;
}
.selectbox-004 select {
appearance: none;
min-width: 230px;
height: 2.8em;
padding: .4em calc(.8em + 30px) .4em .8em;
border: none;
border-radius: 3px;
box-shadow: 0 4px 4px rgb(0 0 0 / 2%), 0 2px 3px -2px rgba(0 0 0 / 5%);
background-color: #fff;
color: #333333;
font-size: 1em;
cursor: pointer;
}