我试图了解如何以特定方式自定义 HTML5 日期选择器，特别是格式类似于[日历图标] 8 月 31 日，星期二右侧插入符号将打开日期选择器。经过一些初步搜索后，我找到了这些用于自定义日期输入文本框的伪元素。
::-webkit-datetime-edit
::-webkit-datetime-edit-fields-wrapper
::-webkit-datetime-edit-text
::-webkit-datetime-edit-month-field
::-webkit-datetime-edit-day-field
::-webkit-datetime-edit-year-field
::-webkit-inner-spin-button
::-webkit-calendar-picker-indicator
预期的结果是这些自定义选项几乎可以满足大多数自定义日期选择器的情况，但到目前为止我还无法应用这些选项来完全满足目标。例如，我试图去掉文本框中的第二个正斜杠（/ after 31），我不知道如何添加Tue（周二，或Mon周一，Fri周五等）。没有错误消息。
Using ::-webkit-datetime-edit-year-field { display: none; }我能够从文本框中隐藏年份，但是当我尝试定位第二个时/ (using HTML5 日期选择器有样式选项吗？作为参考点）nth-child()伪类（针对第二个/）没有明显的变化。至于一周中某一天的缩短版本（周一、周二、周三、周四、周五、周六、周日），我不知道如何实际实现这一点（如果我找到可行的方法，我会更新）。
::-webkit-datetime-edit-text {
color: darkgreen;
}
/* this did not work */
::-webkit-datetime-edit-text:nth-child(2) {
display: none;
}
::-webkit-datetime-edit-month-field {
color: darkgreen;
}
::-webkit-datetime-edit-day-field {
color: darkgreen;
}
::-webkit-datetime-edit-year-field {
display: none;
}
::-webkit-calendar-picker-indicator {
display: none;
}
.datepicker-container {
display: inline;
position: relative;
width: 100%;
height: 7.625rem;
}
.datepicker-input {
padding-left: 4rem !important;
}<span class="datepicker-container">
<input type="date"
class="datepicker-input"
name="send"
value="2021-08-31"
>
</span>对于视觉效果，目前的样子是这样的：
理想情况下，它看起来像这样：
我没有找到使用普通选择器操作 Shadow dom 元素的方法。你也许可以摆脱一些黑客行为：
::-webkit-datetime-edit-text { visibility:hidden;}
::-webkit-datetime-edit-month-field { color: darkgreen; }
::-webkit-datetime-edit-day-field { color: darkgreen; }
::-webkit-datetime-edit-year-field { display: none; }
::-webkit-calendar-picker-indicator { display: none; }
.datepicker-container {
display: inline;
position: relative;
width: 100%;
height: 7.625rem;
}
.datepicker-input {
padding-left: 4rem !important;
}
.datepicker-input::before{
content:'/';
position: relative;
left:1.6rem;
color: darkgreen;
}
.datepicker-input::after{
content:'▼';
}<span class="datepicker-container">
<input type="date"
class="datepicker-input"
name="send"
value="2021-08-31"
>
</span>