如何为date输入框设置可见黄色日历图标并兼容全浏览器？

问题根源 #

input[type=date]属于替换元素，绝大多数浏览器不支持给它直接添加:before/:after伪元素，这就是你之前的写法无效的核心原因。再加上你设置了黑色背景，原生深色图标直接被遮挡，所以需要针对性处理。

方案一：修改原生日历图标颜色（现代浏览器支持） #

针对Chrome、Edge、Safari（webkit内核）和Firefox，可以直接修改原生图标的样式，快速匹配你的黄色主题：

/* webkit内核浏览器 */
.input[type=date]::-webkit-calendar-picker-indicator {
    filter: invert(70%) sepia(70%) saturate(500%) hue-rotate(30deg); /* 转成匹配#FCA311的黄色 */
    cursor: pointer;
}

/* Firefox浏览器 */
.input[type=date]::-moz-calendar-picker-indicator {
    color: #FCA311;
    cursor: pointer;
}

注：这种写法简单但兼容性有限，IE浏览器不支持。

方案二：全浏览器兼容的自定义图标方案 #

如果要覆盖所有浏览器（包括IE），建议用容器包裹input，手动添加图标并隐藏原生图标，步骤如下：

1. 调整HTML结构

给每个日期输入框添加相对定位的容器：

<div class="field">
    <label class="label"> Check in</label>
    <div class="date-wrapper">
        <input type="date" class="input">
        <span class="calendar-icon">📅</span>
    </div>
</div><br>
<div class="field">
    <label class="label"> Check out</label>
    <div class="date-wrapper">
        <input type="date" class="input">
        <span class="calendar-icon">📅</span>
    </div>
</div><br>

2. 调整CSS样式

保留你原有样式的同时，补充容器和图标相关样式：

/* 保留原有.input样式，补充内边距避免文字与图标重叠 */
.input{
    float: right;
    height: 1.8vw;
    width: 10vw;
    border: 1px solid #FCA311;
    border-radius: 5px;
    background-color: black;
    color: white;
    text-align: center;
    padding-right: 1.5vw; /* 给图标留出空间 */
    position: relative;
    z-index: 1;
}

/* 容器设置相对定位，作为图标的定位基准 */
.date-wrapper {
    position: relative;
    float: right;
}

/* 自定义日历图标样式 */
.calendar-icon {
    position: absolute;
    right: 0.5vw;
    top: 50%;
    transform: translateY(-50%);
    color: #FCA311;
    font-size: 1.2vw;
    cursor: pointer;
    z-index: 2;
    pointer-events: none; /* 让点击事件穿透到下方input，保证能弹出日历 */
}

/* 隐藏各浏览器原生图标（保留点击功能） */
.input[type=date]::-webkit-calendar-picker-indicator {
    opacity: 0;
    cursor: pointer;
}
.input[type=date]::-moz-calendar-picker-indicator {
    opacity: 0;
    cursor: pointer;
}
/* IE下隐藏原生按钮 */
.input[type=date]::-ms-clear,
.input[type=date]::-ms-reveal {
    display: none;
}

方案说明

• 用date-wrapper容器定位自定义图标，确保图标在input上方且位置精准
• 给input添加右侧内边距，避免输入的日期文字和图标重叠
• 通过opacity:0隐藏原生图标，保留其点击触发日历的功能
• 设置pointer-events: none让图标点击事件穿透到input，保证点击图标能正常唤起日历弹窗

内容的提问来源于stack exchange，提问作者Utsav Maji