如何修改date类型输入框的图标并使其保持在左侧？

要实现替换Date输入框的默认日历图标，并将自定义图标固定在左侧，只需通过CSS修改::-webkit-calendar-picker-indicator伪元素的背景图，并调整输入内容的布局避免遮挡，以下是修改后的完整代码：

<style>
  /* 自定义日历选择器图标 */
  input[type="date"]::-webkit-calendar-picker-indicator {
      color: rgba(0, 0, 0, 0); /* 隐藏默认图标颜色 */
      opacity: 1;
      display: block;
      background-repeat: no-repeat;
      background-position: center;
      width: 25px;
      height: 25px;
      border-width: thin;
      /* 替换为你的自定义图标链接 */
      background-image: url('你的自定义图标URL');
      /* 固定在左侧 */
      position: absolute;
      left: 8px; /* 调整左侧间距，让图标和输入框边缘对齐 */
      cursor: pointer; /* 保持点击光标 */
  }

  /* 调整日期输入内容的位置，避免被图标遮挡 */
  input::-webkit-datetime-edit-fields-wrapper {
      padding-left: 35px; /* 适配图标宽度，留出足够空间 */
  }

  input::-webkit-datetime-edit {
      padding-left: 0;
  }

  .sd-container {
    position: relative;
    float: left;
  }

  .sd {
    padding: 5px 10px;
    height: 30px;
    width: 150px;
    box-sizing: border-box; /* 确保padding不会撑大输入框 */
  }
</style>

<form>
    <div class="sd-container">
      <input class="sd" type="date" name="selected_date" id="date" />
    </div>
</form>

关键修改说明： #

• 替换图标：在::-webkit-calendar-picker-indicator中添加background-image属性，将你的自定义图标URL替换为实际的图片链接（本地路径或在线地址均可）。
• 图标定位：用固定像素值（如8px）调整left属性，让图标紧贴输入框左侧，比百分比定位更精准。
• 内容偏移：将datetime-edit-fields-wrapper的padding-left设置为略大于图标宽度的值（35px），确保日期输入内容不会和图标重叠，改用padding替代原有的相对定位left，布局逻辑更合理。
• 盒模型优化：给.sd添加box-sizing: border-box，避免padding导致输入框宽度超出预期。

内容的提问来源于stack exchange，提问作者Jose Eduardo Perez