【问题标题】:woocommerce checkout option dropdown blue color problemwoocommerce结帐选项下拉蓝色问题
【发布时间】:2021-07-25 04:37:01
【问题描述】:

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

【问题讨论】:

标签: jquery css wordpress woocommerce


【解决方案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);

【讨论】:

  • 我没有否决您的答案,但可能的原因是:代码未经测试,因为 OP 没有提供足够的故障排除或最小的工作示例;答案主要是站外链接,它可能会改变或变成 404,因此对未来的访问者毫无用处。虽然这个答案可能是通往答案的路径,但它不一定能完整地回答问题——因为你无法真正提供答案,因为 OP 没有提供足够的信息,所以这是一个猜测。
  • @disinfor 修正
  • 还有其他想法吗...?
猜你喜欢
  • 1970-01-01
  • 2014-08-30
  • 2019-05-25
  • 2016-01-18
  • 2021-06-03
  • 2018-05-02
  • 2018-08-18
  • 2019-11-12
  • 2018-12-17
相关资源
最近更新 更多