Untitled

セレクト要素に擬似要素で三角形などの装飾をすると、その三角形の部分だけクリックできない問題が起こります。
その場合、疑似要素対しに「pointer-events: none;」を指定することで解決ができます。
マウスイベントのターゲットから除外することで、セレクト要素の選択が可能になります。

select label {
    position: relative;
}

select label:after {
    display: block;
    content: " ";
    position: absolute;
    top: 50%;
    right: 30px;
    width: 30px;
    height: 30px;
    margin-top: -8px;
    background: url(○◯◯.png)  no-repeat;
    background-size: 20px;
    pointer-events: none;/*　←★これ*/
}