
HTML・CSSでつくるセレクトボックスのデザイン3選
フォームとして沢山の選択肢を表示するのに最適なセレクトボックス。今回はそんなセレクトボックス(プルダウン)のおしゃれなデザインをまとめました。どれもコピペだけで再現できるものなので、ぜひ取り入れてみてください。
フラットなセレクトボックス
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 {
right: 0;
display: inline-block;
width: 40px;
height: 40px;
border-radius: 0 5px 5px 0;
background-color: #2589d0;
}
.selectbox-001::after {
position: absolute;
top: 50%;
right: 20px;
transform: translate(50%, -50%) rotate(45deg);
width: 5px;
height: 5px;
border-bottom: 3px solid #fff;
border-right: 3px solid #fff;
}
.selectbox-001 select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
min-width: 230px;
height: 40px;
padding: 5px 25px 5px 15px;
border: none;
border-radius: 5px;
background-color: #e6edf3;
color: #333333;
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: 40px;
height: 40px;
border-radius: 0 5px 5px 0;
background-color: #2589d0;
content: '';
}
.selectbox-002::after {
position: absolute;
top: 50%;
right: 20px;
transform: translate(50%, -50%) rotate(45deg);
width: 5px;
height: 5px;
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: 40px;
padding: 5px 25px 5px 15px;
border: 2px solid #2589d0;
border-radius: 5px;
color: #333333;
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: #777;
clip-path: polygon(0 0, 100% 0, 50% 100%);
content: '';
pointer-events: none;
}
.selectbox-003 select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
min-width: 200px;
height: 40px;
padding: 5px 50px 5px 15px;
border: 1px solid #d0d0d0;
border-radius: 5px;
background-color: #fff;
color: #555;
cursor: pointer;
}