すべてのブラウザ/オペレーティングシステムで機能するように、色を選択色と同じに設定するにはどうすればよいですか？

だから私はに基づいてカスタムコンポーネントを作成して<ul><li>いますが、<select><option>それをクリックすると、その特定のコンポーネントのcssに何かを追加することで、その前景/背景をユーザーシステムのデフォルトの選択色に設定したいと思います

現在、特定のOSの特定のブラウザにのみ適したバージョンのblueにハードコードされています。

 .delete_criteria li.selected {
      background-color: #3399FF;
      color: white;
    }

上記のCSSを追加しない場合、選択しても目に見える変化はありません。この擬似コードが示すように、私がやりたいことはデフォルトに設定されています

.delete_criteria li.selected {
          background-color: default-selection-background-colour;
          color: default-selection-foreground-colour;
        }

しかし、default-selection-background-colourとdefault-selection-foreground-colourを何に置き換えるかわかりません

htmlとjavscriptを示すより完全な例：

   <div class="delete_criteria">
<ul>
    <li>
        <div>
            <label>
                Audio Format
            </label>
            <input name="AUDIOFORMAT" id="AUDIOFORMAT" value="AUDIOFORMAT" hidden="hidden" type="text">
        </div>
    </li>
    <li>
        <div>
            <label>
                Bitrate
            </label>
            <input name="BITRATE" id="BITRATE" value="BITRATE" hidden="hidden" type="text">
        </div>
    </li>
    <li>
        <div>
            <label>
                Track Length
            </label>
            <input name="TRACKLENGTH" id="TRACKLENGTH" value="TRACKLENGTH" hidden="hidden" type="text">
        </div>
    </li>
    <li>
        <div>
            <label>
                Filename
            </label>
            <input name="FILENAME" id="FILENAME" value="FILENAME" hidden="hidden" type="text">
        </div>
    </li>
    <li>
        <div>
            <label>
                File Creation Date
            </label>
            <input name="FILE_CREATION_DATE" id="FILE_CREATION_DATE" value="FILE_CREATION_DATE" hidden="hidden" type="text">
        </div>
    </li>
    <li>
        <div>
            <label>
                File Modified Date
            </label>
            <input name="FILE_MODIFIED_DATE" id="FILE_MODIFIED_DATE" value="FILE_MODIFIED_DATE" hidden="hidden" type="text">
        </div>
    </li>
</ul>
<button id="up" type="button">
    Up
</button>
<button id="down" type="button">
    Down
</button>
// enable moving an element up
document.getElementById('up').addEventListener('click', () => {
  var li = document.querySelector('li.selected');
  if (li.previousElementSibling !== null) {
    li.parentNode.insertBefore(li, li.previousElementSibling);
  }
});

// enable moving an element down
document.getElementById('down').addEventListener('click', () => {
  var li = document.querySelector('li.selected');
  if (li.nextElementSibling !== null) {
    li.parentNode.insertBefore(li, li.nextElementSibling.nextElementSibling);
  }
});
                                    </script>
                                </div>
                            </td>
                        </tr>
                    </table>
                    <div>
.delete_criteria ul {
  padding-left: 0;
  width: 20em;
  list-style-type: none;
  border: 1px solid darkgray;
  vertical-align:top;
}

.delete_criteria li {
  padding: 2px 4px;
}

.delete_criteria li.selected {
  background-color: #3399FF;
  color: white;
}

以下の質問を読みましたが、ユーザーの状況に関係なく、値をハードコードされた値に設定する方法のみを示しています。

テキストを選択するときのブラウザのデフォルトの背景色は何ですか？