如何移除Chrome中<input type=date>悬停箭头及修改hover效果

我完全懂你的困扰——把<input type="date">改成按钮样式后，Chrome的默认悬停效果直接打乱了自定义样式，Firefox却能正常显示对吧？别慌，咱们可以通过针对性的CSS来覆盖Chrome的默认行为，同时不影响Firefox的表现。

核心解决方案：覆盖Chrome的WebKit默认样式 #

Chrome基于WebKit内核，对日期选择器有一套专属的伪元素和默认状态样式，咱们需要精准覆盖这些样式：

1. 重置输入框本身的悬停样式
   首先确保你的自定义按钮样式在悬停时不被浏览器默认样式覆盖，优先用高特异性选择器避免!important：

   input.date-picker-button:hover {
     background: #8DBF42; /* 保持你原来的自定义背景色 */
     color: #fff; /* 你的自定义文字颜色，按需调整 */
     border: none; /* 如果不需要边框就设为none，或者匹配你的样式 */
     /* 其他你需要保留的自定义样式 */
   }
   

   如果还是被默认样式覆盖，可以临时加!important应急：

   .date-picker-button:hover {
     background: #8DBF42 !important;
     color: #fff !important;
   }
   

2. 覆盖日历选择器指示器的悬停样式
   Chrome的日期选择器自带一个小日历图标（::-webkit-calendar-picker-indicator），它默认有悬停背景/变色效果，咱们直接移除并自定义：

   .date-picker-button::-webkit-calendar-picker-indicator {
     filter: invert(1); /* 按需调整图标颜色，比如把灰色改成白色 */
     cursor: pointer;
   }
   
   .date-picker-button::-webkit-calendar-picker-indicator:hover {
     background: transparent !important; /* 移除默认悬停背景 */
     /* 可选：加你自己的悬停效果，比如轻微缩放 */
     transform: scale(1.1);
   }
   

3. 移除多余的默认元素（可选）
   有时候Chrome会给日期输入框加微调按钮，看着别扭的话可以隐藏：

   .date-picker-button::-webkit-inner-spin-button,
   .date-picker-button::-webkit-outer-spin-button {
     display: none;
   }
   

4. 清除聚焦/悬停的默认轮廓
   Chrome默认会给交互元素加outline或box-shadow，一起去掉避免破坏样式：

   .date-picker-button:hover,
   .date-picker-button:focus {
     outline: none;
     box-shadow: none;
   }
   

为什么不影响Firefox？ #

这些::-webkit-*前缀的伪元素是WebKit内核专属的，Firefox（Gecko内核）根本不会识别它们，所以Firefox里的默认和按钮式日期选择器显示完全不受影响，完美兼顾双浏览器。

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