可以使用 CSS 伪类选择器和属性来实现 time 日期选择器。具体实现方法是为 元素设置 type="time" 属性，然后通过 CSS 伪类 :focus 来定制选中状态下的样式（高亮显示），同时使用 ::-webkit-datetime-edit、::-webkit-inner-spin-button 和 ::-webkit-clear-button 等相关 CSS 属性来控制输入框中的样式和按钮。
以下是示例代码：
input[type="time"]:focus {
outline: none; /* 去除默认的外边框 */
border-bottom: solid 2px #4c9aff; /* 高亮底部边框 */
}
input[type="time"]::-webkit-datetime-edit {
/* 隐藏“秒”部分 */
-webkit-appearance: none;
-moz-appearance: textfield;
display: inline-block !important;
width: calc(100% - 24px); /* 保留输入框左侧空间给按钮 */
}
input[type="time"]::-webkit-inner-spin-button,
input[type="time"]::-webkit-clear-button {
/* 隐藏清除按钮和调整按钮 */
-webkit-appearance: none;
display: none;
}需要注意的是，CSS 只能美化 HTML 的样式，而无法增加交互功能。如果需要实现更全面的日期选择器以及响应用户行为等交互性质的操作，则需要结合 JavaScript 编写有关脚本代码。
