css 替换日期控件图标

要替换日期控件图标，可以使用 CSS 中的伪元素 `::before` 或 `::after`，并设置其 `content` 属性为一个 Unicode 字符或图片 URL。具体步骤如下：

1. 给日期控件输入框添加一个类名，例如 `date-input`。
2. 添加一个伪元素作为图标，使用 `content` 属性设置图标，例如使用 Unicode 字符：`content: "\1F4C5";`，或者使用图片 URL：`content: url("icon.png");`。
3. 设置伪元素的样式，包括宽高、位置、背景等。
4. 隐藏原有的日期控件图标，可以使用 `appearance: none;` 和 `background-image: none;`。

示例代码：

<input type="date" class="date-input">

<style>
.date-input::-webkit-calendar-picker-indicator {
  display: none; /* 隐藏原有图标 */
}

.date-input::before {
  content: "\1F4C5"; /* Unicode 字符作为图标 */
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  font-size: 16px;
  text-align: center;
  line-height: 20px;
  color: #999;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
}
</style>

注意：不同浏览器对于日期控件的样式支持不一样，上述示例代码只适用于 WebKit 内核的浏览器，需要根据实际情况进行调整。