事象:
セレクト要素の「▼」部分を擬似要素で表した場合、
矢印部分をクリック(タッチ)してもselectにフォーカスするだけでメニューが開かない。
解決策:
疑似要素対しに「pointer-events: none;」としておく。
マウスイベントのターゲットから除外し、下に存在するselectが反応することが可能。
.select-box02 label {
position: relative;
}
.select-box02 label:after {
display: block;
content: " ";
position: absolute;
top: 50%;
right: 20px;
width: 20px;
height: 20px;
margin-top: -8px;
background: url(arrow02.png) 0 0 no-repeat;
background-size: 20px;
pointer-events: none;/* ←★これ*/
}