如何通过CSS单独设置日期输入框的各字段样式？

首先得说清楚：原生的日期/月份输入框（比如<input type="date">或<input type="month">）的内部组件是浏览器自己渲染的，不同浏览器的DOM结构差得远，根本没有标准的CSS选择器能直接选中年、月、日这些单独字段——你示例里写的day/month/year选择器是无效的，因为这些不是合法的HTML元素。

要实现单独给每个字段设样式，最靠谱的办法是把原生输入框藏起来，用自定义的HTML结构模拟外观，同时和原生输入框绑定值，这样既能完全控制样式，又不丢原生输入框的表单提交、验证这些功能。

具体实现步骤 #

1. 编写HTML结构 #

保留原生输入框处理表单逻辑，同时添加自定义容器放置模拟字段：

<div class="custom-date-input">
  <label for="start">选择日期：</label>
  <!-- 原生输入框，仅保留功能，视觉上隐藏 -->
  <input type="date" id="start" name="start" min="2018-03" value="2018-05">
  <!-- 自定义日期字段容器 -->
  <div class="date-fields">
    <input type="text" class="date-field year" placeholder="年" readonly>
    <span class="separator">-</span>
    <input type="text" class="date-field month" placeholder="月" readonly>
    <span class="separator">-</span>
    <input type="text" class="date-field day" placeholder="日" readonly>
  </div>
</div>

2. 编写CSS样式 #

隐藏原生输入框，同时美化自定义字段：

/* 隐藏原生日期输入框，但不影响其功能 */
.custom-date-input input[type="date"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* 自定义字段的布局样式 */
.date-fields {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
}

/* 单个字段的基础样式 */
.date-field {
  width: 60px;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid #ddd;
  font-size: 14px;
}

/* 给每个字段单独设置边框颜色 */
.date-field.year {
  border-color: pink;
}

.date-field.month {
  border-color: red;
}

.date-field.day {
  border-color: blue;
}

.separator {
  color: #666;
}

3. 用JavaScript绑定值 #

将原生输入框的日期值同步到自定义字段，同时点击自定义字段时触发原生日期选择器：

const nativeInput = document.getElementById('start');
const yearField = document.querySelector('.year');
const monthField = document.querySelector('.month');
const dayField = document.querySelector('.day');
const dateFieldsContainer = document.querySelector('.date-fields');

// 同步原生输入框的值到自定义字段
function syncDate() {
  const dateVal = nativeInput.value;
  if (!dateVal) return;
  
  const [year, month, day] = dateVal.split('-');
  yearField.value = year;
  monthField.value = month;
  dayField.value = day;
}

// 页面加载时先同步一次
syncDate();

// 原生输入框选完日期后同步
nativeInput.addEventListener('input', syncDate);

// 点击自定义字段时触发原生选择器
dateFieldsContainer.addEventListener('click', () => {
  nativeInput.click();
});

额外说明 #

• 如果使用<input type="month">（仅需年月），直接去掉自定义字段里的“日”部分即可，逻辑基本一致。
• 这种方法的优势是样式完全可控，兼容所有浏览器，同时保留原生日期输入的验证、最小/最大日期限制等功能。
• 不要尝试使用浏览器私有的伪元素选择器，这类非标准属性会随着浏览器版本更新失效。

内容的提问来源于stack exchange，提问作者RandomDeveloper