如何在未选中的情况下使材料复选框填充为灰色？

要在未选中的情况下使材料复选框（Material Checkbox）填充为灰色，可以通过CSS来自定义复选框的样式。以下是一个基本的示例，展示了如何实现这一效果：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Material Checkbox Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <label class="checkbox-container">
        One
        <input type="checkbox" checked="unchecked">
        <span class="checkmark"></span>
    </label>
    <label class="checkbox-container">
        Two
        <input type="checkbox">
        <span class="checkmark"></span>
    </label>
</body>
</html>

CSS部分（styles.css）

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

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

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

/* When the checkbox is checked, add a blue background */
.checkbox-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 */
.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}

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

解释

HTML结构：每个复选框包含在一个label标签内，这样可以实现点击文本也能选中复选框的效果。每个复选框都有一个对应的span元素用于显示自定义的复选标记。
CSS样式：
- 隐藏默认的复选框：通过设置input元素的opacity为0，并将其定位到屏幕外。
- 自定义复选框样式：使用.checkmark类来定义复选框的外观，默认情况下填充为灰色（#eee）。
- 鼠标悬停效果：当鼠标悬停在复选框上时，背景色变为浅灰色（#ccc）。
- 选中状态：当复选框被选中时，背景色变为蓝色（#2196F3）。
- 自定义复选标记：通过伪元素:after来创建一个勾选标记，并在选中时显示。