css修改input框默认样式（date）

人生意义几何

已于 2022-05-29 21:17:35 修改

阅读量6.6k

点赞数 6

分类专栏： CSS Less 文章标签： css javascript css3

于 2022-05-29 20:59:23 首次发布

本文链接：https://blog.csdn.net/zhudingfengshen/article/details/125035425

版权

CSS 同时被 2 个专栏收录

9 篇文章

订阅专栏

Less

5 篇文章

订阅专栏

本文介绍如何通过CSS和JavaScript调整HTML中input[type=date]元素的样式，包括更改图标位置、隐藏默认日期显示并使用自定义占位符。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目场景：

如图，需求方要求input框的日期选择器修改成如下格式，默认样式如底部
在这里插入图片描述

解决方案：

以下为修改步骤：

替换日期选择器icon，并将其移到左边

input[type="date"] {
  display: flex;
  padding-left: 10px;
  padding-right: 550px;
  font-size: 16px;
  line-height: 24px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  position: relative;
  left: -120px;
  background-image: url("../assets/img/submitInfo/日期选择器.png");
}

在这里插入图片描述

隐藏年月日，显示placeholder

input[type="date"]:before {
  content: attr(placeholder);
  padding-left: 20px;
}

在这里插入图片描述
可以看到此时还有如下问题，placeholder成功显示，但是此时默认的年月日还在显示

当选择日期后，placeholder隐藏，默认日期格式显示

input[type="date"].selected:before  {
  content: "" !important;
}

  let itemRightDate = document.querySelector("input[type=date][name=date]");
	
   itemRightDate.addEventListener("input", function (e) {
    let {
      target: { value },
    } = e;

    if (value.length > 0) {
      e.target.classList.add("selected");
    } else {
      e.target.classList.remove("selected");
    }
  });

在这里插入图片描述

针对placeholder显示时默认的年月日显示且被截断

input[type="date"]::-webkit-datetime-edit-year-field {
  position: relative;
  left: 10px;
}

在这里插入图片描述
5. placeholder样式和设计稿不符

input[type="date"]:before {
  content: attr(placeholder);
  padding-left: 20px;
  color: var(--gray-rgba-116116116);
  font-size: 16px;
  line-height: 22px;
}

在这里插入图片描述
可以看到已经满足要求了，录区域视频再转gif太麻烦了，截图也能表现出来～

最终完整版样式

input[type="date"] {
  display: flex;
  padding-left: 10px;
  padding-right: 550px;
  font-size: 16px;
  line-height: 24px;
}

input[type="date"]:before {
  content: attr(placeholder);
  padding-left: 20px;
  color: var(--gray-rgba-116116116);
  font-size: 16px;
  line-height: 22px;
}

input[type="date"].selected:before  {
  content: "" !important;
}

input[type="date"]::-webkit-datetime-edit-year-field {
  position: relative;
  left: 10px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  position: relative;
  left: -120px;
  background-image: url("../assets/img/submitInfo/日期选择器.png");
}