Select要素の三角部分を擬似要素で表現した際、クリックできない

事象：

セレクト要素の「▼」部分を擬似要素で表した場合、
矢印部分をクリック（タッチ）しても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;/*　←★これ*/
}