火狐浏览器中自定义带SVG的日期输入框点击区域问题求助

核心问题原因 #

你使用的::-webkit-calendar-picker-indicator是Chrome、Safari等WebKit内核浏览器的专属伪元素，Firefox完全不识别这个选择器，所以你的样式在Firefox中不会生效。Firefox有自己的日期选择器指示器伪元素：::-moz-calendar-picker-indicator。

解决方案步骤 #

1. 针对Firefox替换伪元素选择器

直接用Firefox专属的伪元素调整指示器的点击区域，让它覆盖你需要的范围：

input[type="date"]::-moz-calendar-picker-indicator {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    /* 若要隐藏默认图标，添加 opacity: 0; */
}

注意要给日期输入框的父元素设置position: relative;，否则绝对定位的指示器会相对于整个页面定位。

2. 配合自定义SVG图标实现完整点击区域

如果需要显示自定义SVG图标，建议给输入框套一个容器，将SVG放在容器内，同时让Firefox的指示器透明，确保点击SVG区域也能触发日期选择：

<div class="date-wrapper">
    <input type="date" class="custom-date-input">
    <svg class="date-svg" viewBox="0 0 24 24">
        <path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm0 16H5V8h14v11z"/>
    </svg>
</div>

对应的CSS：

.date-wrapper {
    position: relative;
    display: inline-block;
}

.custom-date-input {
    padding-right: 32px; /* 给SVG留出右侧空间 */
    height: 32px;
    box-sizing: border-box;
}

/* 调整Firefox指示器，让它覆盖SVG所在的右侧区域 */
.custom-date-input::-moz-calendar-picker-indicator {
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: 100%;
    opacity: 0; /* 隐藏默认图标 */
    cursor: pointer;
}

.date-svg {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    pointer-events: none; /* 让点击穿透到下方的指示器，避免SVG阻挡事件 */
}

3. 兼容多浏览器的补充

如果需要同时支持Chrome和Firefox，可以同时定义两个伪元素的样式：

/* Chrome/Safari等WebKit内核浏览器 */
input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
}

/* Firefox浏览器 */
input[type="date"]::-moz-calendar-picker-indicator {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
}

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