Microsoft Edge 中的复选框颜色

Question

我正在努力将我的 Chrome 扩展移植到 Edge 以获得更广泛的可用性 - 一切似乎运行都很好，除了复选框的样式。在 Chrome 中，默认样式是蓝色，这很适合扩展的外观，但现在 Edge 中的复选框是灰色的。我已经尝试了几种不同的方法来设置颜色（在 JS 样式中，HTML、CSS），但似乎没有任何效果——有人有在 Edge 中设置复选框颜色样式的经验吗？

Answer 1

单独设置复选框的颜色可能不起作用。我建议你尝试设计一个自定义复选框。

这是一个简单的例子：

 /* The container */
        .container {
            display: block;
            position: relative;
            padding-left: 35px;
            margin-bottom: 12px;
            cursor: pointer;
            font-size: 17px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

            /* Hide the browser's default checkbox */
            .container input {
                position: absolute;
                opacity: 0;
                cursor: pointer;
                height: 0;
                width: 0;
            }

        /* Create a custom checkbox */
        .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 16px;
            width: 16px;
            background-color: #eee;
        }

        /* On mouse-over, add a grey background color */
        .container:hover input ~ .checkmark {
            background-color: #ccc;
        }

        /* When the checkbox is checked, add a blue background */
        .container input:checked ~ .checkmark {
            background-color: #2196F3;
        }

        /* Create the checkmark/indicator (hidden when not checked)  */
        .checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }

        /* Show the checkmark when checked */
        .container input:checked ~ .checkmark:after {
            display: block;
        }

        /* Style the checkmark/indicator */
        .container .checkmark:after {
            left: 4px;
            top: 0px;
            width: 5px;
            height: 10px;
            border: solid white;
            border-width: 0 3px 3px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }

<h1>Custom Checkboxes</h1>
    <label class="container">
        check value
        <input type="checkbox" checked="checked">
        <span class="checkmark"></span>
    </label>

您也可以根据自己的需要修改其大小或位置。更多详情，您也可以参考How TO - Custom Checkbox.

Microsoft Edge 中的复选框颜色

checkbox color in Microsoft Edge

browser-extension

microsoft-edge