<div class="wrapper">
<select name="" id="">
<option value="">選択してください</option>
<option value="tomato">トマト</option>
<option value="cabbage">キャベツ</option>
<option value="cucumber">キュウリ</option>
<option value="bellpepper">ピーマン</option>
</select>
</div>
select {
/* ブラウザのデフォルトのスタイルをクリアする */
appearance: none;
appearance: none;
appearance: none;
outline: 0;
/* サイズは親要素いっぱいになるようにすると扱いやすい */
width: 100%;
height: 100%;
/* 以下スタイルづけ */
border: 2px solid #ff2e63;
background-color: #fff5f4;
border-radius: 5px;
color: #ff2e63;
font-size: 1.1rem;
font-weight: bold;
padding: 5px 10px;
}
/* 以下、親要素に設定
・サイズの指定
・擬似要素の指定 */
.wrapper{
width: 300px;
height: 60px;
position: relative;
}
/* 擬似要素で矢印をつける */
.wrapper::before{
content: "";
border-top: 12px solid #ff2e63;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.