如何修改HTML type=time输入框选中区域蓝色矩形的颜色为橙色

你需要修改的选中区域蓝色背景可通过适配不同浏览器内核的专属伪元素实现，以下是完整可直接使用的代码： #

样式代码 #

/* 适配WebKit内核浏览器（Chrome、Edge、Safari等）时间输入框内部分段选中样式 */
.timeBox::-webkit-datetime-edit-text:focus,
.timeBox::-webkit-datetime-edit-hour-field:focus,
.timeBox::-webkit-datetime-edit-minute-field:focus,
.timeBox::-webkit-datetime-edit-ampm-field:focus {
  background-color: #ff7f00;
  color: #ffffff;
  outline: none;
}

/* 通用选中高亮适配，覆盖火狐等其他浏览器场景 */
.timeBox::selection {
  background-color: #ff7f00;
  color: #ffffff;
}
.timeBox::-moz-selection {
  background-color: #ff7f00;
  color: #ffffff;
}

原有HTML无需修改 #

<input class="timeBox" type="time" value="13:30"/>

补充说明 #

• 可根据需求自行调整橙色的十六进制色值，也可以搭配border-radius等属性修改选中区域的形状
• 原生时间输入控件的样式能力受浏览器内核限制，若需要全浏览器完全一致的交互效果，建议自行封装自定义时间选择组件
• 时钟图标样式可通过::-webkit-calendar-picker-indicator伪类单独调整，和选中样式互不冲突

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