<div class="cp_ipselect05">
<select required>
<option value="" hidden>Choose</option>
<option value="1">cat</option>
<option value="2">dog</option>
<option value="3">rabbit</option>
<option value="4">squirrel</option>
</select>
</div>
.cp_ipselect05 {
position: relative;
display: flex;
align-items: center;
margin: 2em auto;
border: 2px solid #da3c41;
border-radius: 50px;
background: #da3c41;
}
/*プルダウンの三角を設定*/
.cp_ipselect05::before {
position: absolute;
right: 15px;
content: '';
width: 16px;
height: 8px;
background: #ffffff;
clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.cp_ipselect05 select {
width: 100%;
padding: 10px 45px 10px 10px;
color: #ffffff;
cursor: pointer;
text-overflow: ellipsis;/*テキストがオーバーしたら'...'で省略*/
z-index: 1;
/* 標準のスタイルを無効にする */
border: none;
appearance: none;
outline: none;
background: transparent;
}