【CSS】iOSでセレクトボックスをタップしたときにアウトラインの一部が見切れる

課題

<select>のマークアップ時に、iOSでセレクトボックスをタップするとアクティブを示すアウトラインが表示されるが、線の一部が要素の幅からはみ出して見切れてしまった

左端が切れている

プロセス

<select>のoutlineやoutline-offsetの設定をいじってみたが改善しなかった

select {
    outline: 1px solid blue;
    outline-offset: -1px;
}

解決方法

<select>の擬似クラス:focusのoutlineとoutline-offsetを調整する

select {
    &:focus {
        outline: 2px solid $color-blue;
        outline-offset: -2px;
    }
}

久しぶりのフォーム系のコーディングで:focusの存在をすっかり失念していました！