修改原生的＜input type=“datetime-local“＞样式

最新推荐文章于 2025-03-19 00:30:00 发布

前端熊猫

最新推荐文章于 2025-03-19 00:30:00 发布

阅读量451

点赞数 5

文章标签： javascript css css3

本文链接：https://blog.csdn.net/m0_72030584/article/details/146231450

版权

效果

在这里插入图片描述

基础样式

<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;
  }
}