woocommerce结帐选项下拉蓝色问题

Question

我无法从 woocommerce 结帐页面上的选择下拉选项中删除蓝色。当您将鼠标悬停在该选项上时，蓝色背景会出现在文本下方。同样，这种蓝色在每个浏览器中看起来都不同.. 如何克服？

Answer 1

样式选择元素下拉列表的问题已经确定，基本上您的选择非常有限。据我所知，跨浏览器自定义样式仍然是不可能的。

您将需要使用 JavaScript。我已经成功使用了一段时间的插件是 Choices.js https://github.com/jshjohnson/Choices。这确实增加了一些开销，但有一个很好的用户体验。有许多替代品可供选择，您可以自己推出。使用 Choices.js：

从 CDN 安装最新资产

<!-- Include base CSS (optional) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/base.min.css"
/>

<!-- Include Choices CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css"
/>

<!-- Include Choices JavaScript (latest) -->
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>

添加脚本以应用选项

;(function($, document) {

    var $doc = $(document);

    $doc.ready(function() {
        initSelect();       
    });

    function initSelect() {
        if ($(".variations select").length) {
            var choices = new Choices(".variations select", {
                searchEnabled: false,
                shouldSort: false,
                itemSelectText: "",
            });
        }
    }

})(jQuery, document);