如何修改type为time的输入框下拉面板的CSS样式

嘿，我懂你想给time类型输入框的下拉面板定制样式的需求！不过得先给你提个醒：这类原生控件的下拉面板是浏览器自己渲染的，不同浏览器（比如Chrome、Firefox、Safari）的样式控制方式差得挺多，很多时候没有公开的通用CSS选择器能直接改，但在WebKit/Blink内核的浏览器（像Chrome、Edge这些）里，咱们还是有办法折腾一下的。

先给你一套能在Chrome/Edge里生效的完整代码，包含你原来的图标样式，再加上下拉面板的定制：

/* 自定义时钟触发图标（保留你原来的核心样式） */
input[type="time"]::-webkit-calendar-picker-indicator {
  background-color: rgba(255, 255, 255, .5);
  height: 24px;
  padding: 10px;
  cursor: pointer;
  filter: invert(6%) sepia(85%) saturate(3100%) hue-rotate(175deg) brightness(95%) contrast(90%);
}

/* 输入框本身的样式 */
#timeInput {
  border-radius: 5px;
  padding: 0 0 0 5px !important;
  font-family: 'Arial', sans-serif;
  font-size: 14px;
}

/* 控制WebKit内核浏览器的时间下拉面板整体样式 */
input[type="time"]::-webkit-time-picker {
  background-color: #f5f5f5; /* 下拉面板背景色 */
  font-family: 'Segoe UI', Tahoma, sans-serif; /* 自定义字体 */
  font-size: 14px; /* 字体大小 */
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 下拉面板选项的hover效果 */
input[type="time"]::-webkit-time-picker > option:hover {
  background-color: #1976D2;
  color: #fff;
}

/* 下拉面板里小时、分钟输入区域的样式 */
input[type="time"]::-webkit-datetime-edit-hour-field,
input[type="time"]::-webkit-datetime-edit-minute-field {
  padding: 4px 8px;
  border-radius: 4px;
}

input[type="time"]::-webkit-datetime-edit-hour-field:hover,
input[type="time"]::-webkit-datetime-edit-minute-field:hover {
  background-color: #e3f2fd;
}

对应的HTML还是你原来的：

<input class='form-control input-sm' type="time" step="60" id="timeInput" name="timeInput">

再给你划几个重点：

• 上面这些样式只对WebKit/Blink内核的浏览器有效，像Firefox、旧版Edge或者IE，原生time控件的下拉面板基本没法用CSS自定义——这些浏览器对原生控件的样式封闭性很强，要是你需要兼容它们，不如直接用第三方的时间选择器插件（纯JS或者基于Vue/React这类框架的都可以）来替代原生控件，这样样式完全可控。
• 浏览器版本更新可能会悄悄改这些私有伪元素的支持，所以写完样式一定要在目标浏览器里测试一遍，确保效果符合预期。
• 要是你想做更复杂的定制（比如完全改下拉面板的布局、加额外功能），原生控件肯定满足不了，直接自己用JS写个自定义的时间选择下拉框，或者用成熟的第三方组件，会省很多事儿。

要是你在测试的时候遇到某个浏览器不生效的情况，或者需要更具体的样式调整，随时再琢磨哦！

内容来源于stack exchange