效果

基础样式

<input type="datetime-local" class="custom-datetime">

input[type="datetime-local"] {/* 重置默认样式 */-webkit-appearance: none;-moz-appearance: none;appearance: none; // 禁用浏览器默认样式/* 自定义基础样式 */width: 200px;height: 30px;background: rgba(14, 20, 28, 1);color: #fff;border: 1px solid #7ad0e5;border-radius: 4px;padding: 5px 10px;outline: none;font-family: system-ui;/* 鼠标交互 */transition: all 0.3s ease;&:hover {border-color: #9adcf0;box-shadow: 0 0 8px rgba(122, 208, 229, 0.3);}&:focus {border-color: #4ec3e0;box-shadow: 0 0 12px rgba(122, 208, 229, 0.5);}
}

日期编辑区域样式

 input[type="datetime-local"] {/* 编辑区域整体 */
&::-webkit-datetime-edit {padding: 0;color: #fff;
}/* 年月日时分字段 */
&::-webkit-datetime-edit-fields-wrapper {background: transparent;padding: 0 2px;
}/* 分隔符样式 */
&::-webkit-datetime-edit-text {color: #7bcfd9;padding: 0 1px;
}/* 单个字段悬停效果 */
&::-webkit-datetime-edit-year-field:hover,
&::-webkit-datetime-edit-month-field:hover {background: rgba(122, 208, 229, 0.1);
}}

日历图标自定义

&::-webkit-calendar-picker-indicator {background-image: url('your-icon.svg');background-size: 18px;background-position: center;width: 24px;height: 24px;cursor: pointer;filter: brightness(0) invert(1);transition: filter 0.2s;
}&::-webkit-calendar-picker-indicator:hover {filter: invert(65%) sepia(60%) saturate(400%) hue-rotate(160deg);
}

下拉面板样式

/* 下拉主面板 */
&::-webkit-date-and-time-picker {background: #0e141c;border: 1px solid #7ad0e5;border-radius: 4px;
}/* 时间选择器数字 */
&::-webkit-datetime-edit-hour-field,
&::-webkit-datetime-edit-minute-field {color: #7ad0e5;
}/* 选中状态 */
&::-webkit-datetime-edit-year-field:focus,
&::-webkit-datetime-edit-month-field:focus {background: rgba(122, 208, 229, 0.2);
}

跨浏览器兼容方案

/* Firefox */
input[type="datetime-local"]::-moz-date-and-time-wrapper {background: transparent;color: #fff;
}/* Edge */
@supports (-ms-ime-align: auto) {input[type="datetime-local"] {padding-right: 0;}
}