プルダウンメニューを押下後、メニュー矢印を最初の状態に戻したい

Question

プルダウンメニューを押下後に矢印と背景が変化し、
選択後はじめの矢印の向きと背景に戻したいです。
参考URLをもとに作成しましたが、動きをJSを使わずCSSで行いたいです。

参考：「標準的なプルダウンだが、選択メニューの形式をカスタマイズ。」
https://kodocode.net/design-css-selectlist/

擬似クラスを設ければうまくいくのでしょうか。
ご教授をお願いします。

        <div class="result">
        <p>表示件数</p>
        <select class="classic">
        <option>10</option>
        <option>20</option>
        <option>30</option>
        </select>
        </div>

.result {
            display: flex;
            justify-content: flex-end;
        }
        
        .result p {
            margin-top: 3.5%;
            font-size: 11px;
        }
        
        .result select {
            /* styling */
            background-color: white;
            border: thin solid #C4C4C4;
            border-radius: 4px;
            display: inline-block;
            font: inherit;
            line-height: 1.5em;
            padding: 0.5em 3.5em 0.5em 1em;
            /* reset */
            margin: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-appearance: none;
            -moz-appearance: none;
        }
        /* arrows */
        
        .result select.classic {
            background-image: linear-gradient(58deg, transparent 50%, #222 50%), linear-gradient(120deg, #222 50%, transparent 50%), linear-gradient(to right, #DEDEDE, #DEDEDE);
            background-position: calc(100% - 19px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), 100% 0;
            background-size: 5px 5px, 5px 5px, 2.5em 3em;
            background-repeat: no-repeat;
            margin-bottom: 14px;
            margin-left: 10px;
        }
        
        .result select.classic:focus {
            background-image: linear-gradient(58deg, white 50%, transparent 50%), linear-gradient(120deg, transparent 50%, white 50%), linear-gradient(to right, gray, gray);
            background-position: calc(100% - 16px) 1em, calc(100% - 20px) 1em, 100% 0;
            background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
            background-repeat: no-repeat;
            border-color: grey;
            outline: 0;
        }

Answer 1

「:active」を使ってみてはいかがでしょうか?

.result select.classic:active {
  background-image: linear-gradient(58deg, white 50%, transparent 50%), linear-gradient(120deg, transparent 50%, white 50%), linear-gradient(to right, gray, gray);
  background-position: calc(100% - 16px) 1em, calc(100% - 20px) 1em, 100% 0;
  background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
  background-repeat: no-repeat;
  border-color: grey;
  outline: 0;
}

Comments

[mariueda]

activeを使用しましたが、PC版のみでSP版はうまく動きませんでした。

下記URLの方法を試しましたが、うまく動作していない状況です。
https://analogstd.com/pc/iphone-hover-click-faq/
https://iholdings.jp/archives/2504