如何移除HTML date输入框的日期选择器，仅保留输入验证功能

嘿，这个需求我之前刚好处理过，给你一套靠谱的方案！要移除<input type="date">右侧的日期选择器箭头控件，同时保留手动输入和原生的日期验证功能，关键是用CSS针对不同浏览器的默认伪元素做隐藏——毕竟不同浏览器的日期输入框样式实现有差异。

核心CSS代码 #

下面的代码能覆盖Chrome、Safari、Edge、Firefox等主流浏览器，隐藏掉日期选择器控件，还可以选择性移除上下调整日期的箭头：

/* 隐藏 Chrome/Safari/Edge/Opera 中的日期选择器指示器 */
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

/* 隐藏 Firefox 中的日期选择器指示器 */
input[type="date"]::-moz-calendar-picker-indicator {
    display: none;
    -moz-appearance: none;
}

/* 可选：移除输入框的上下箭头（防止用户通过箭头调整日期，完全强制手动输入） */
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-outer-spin-button {
    display: none;
    -webkit-appearance: none;
}

为什么这么做？ #

这些::-webkit-calendar-picker-indicator、::-moz-calendar-picker-indicator是浏览器内置的伪元素，专门用来渲染日期选择器的触发控件。把它们设为display: none就能直接隐藏掉，同时不会改变输入框的type="date"属性——这很重要，因为原生的日期验证、格式约束（比如只能输入YYYY-MM-DD格式）都会保留下来。

比如用户输入了非法的日期格式，提交表单时浏览器会自动弹出原生的验证提示，完全不需要额外写JS验证逻辑。

完整示例代码 #

把CSS和你的HTML结合起来，效果如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        .sign-inputs {
            padding: 8px;
            font-size: 16px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        /* 隐藏日期选择器控件 */
        input[type="date"]::-webkit-calendar-picker-indicator {
            display: none;
            -webkit-appearance: none;
        }

        input[type="date"]::-moz-calendar-picker-indicator {
            display: none;
            -moz-appearance: none;
        }

        /* 移除上下调整箭头 */
        input[type="date"]::-webkit-inner-spin-button,
        input[type="date"]::-webkit-outer-spin-button {
            display: none;
            -webkit-appearance: none;
        }
    </style>
</head>
<body>
    <input type="date" id="sign-up-dob" class="sign-inputs" max="2999-12-31">
    <!-- 测试验证功能可以加个提交按钮 -->
    <button type="submit">提交</button>
</body>
</html>

注意事项 #

• 别把type="date"改成type="text"，那样会彻底失去原生的日期验证和格式限制，用户可以输入任意内容，反而增加了验证成本。
• 如果需要自定义验证提示文案，可以通过JavaScript的setCustomValidity()方法实现，但原生验证已经能满足大部分基础需求。

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