Javascript css覆盖后未启用html 5日期选择器内的键盘键入

我遇到了一个HTML5日期选择器的问题，我想在输入文本框中点击打开它-

其中一位用户提出了修复方案，但希望保留HTML5日期选择器的现有功能，我也可以使用键盘输入日期

请查找用于覆盖日期选择器的css。关于为现有选择器启用键盘键入的任何线索

我试过这样做，但没有成功

输入[type=“date”]{
位置：相对位置；
}
/*创建一个新的箭头，因为我们将破坏本地箭头
请参阅下面的“符号列表”，如果您需要其他符号，也可以尝试添加一个字体很棒的图标*/
输入[type=“date”]：在{
内容：“\25BC”；
颜色：#555；
填充：0 10px；
}
/*更改悬停时符号的颜色*/
输入[type=“date”]：悬停：之后{
颜色：#bf1400；
}
/*使本机箭头不可见，并将其延伸到整个字段，以便可以单击输入字段中的任意位置以触发本机日期选择器*/
输入[type=“date”]：-webkit日历选取器指示器{
位置：绝对位置；
排名：0；
左：0px；
右：0；
底部：0；
宽度：自动；
高度：自动；
颜色：透明；
背景：透明；
}
/*调整增加/减少按钮*/
输入[type=“date”]：：-webkit内部旋转按钮{
z指数：1；
}
/*调整清除按钮*/
输入[type=“date”]：：-webkit清除按钮{
z指数：1；
}

在HTML5中，您不能键入

。据我所知，没有办法启用此功能。

如果您的意思是这样的话

HTML:

<input type="text" name="startDate" id="datePick" class="input--small"  onkeydown="myFunc()" />

input[type="date"] {
    position: relative;
}

input[type="date"]:after {
    content: "\25BC"; 
    color: #555;
    padding: 0 10px;
}

/* change color of symbol on hover */input[type="date"]:hover:after {
    color: #bf1400;
}


input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 10px;
    left: 0px;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    color: transparent;
    background: transparent;
}

input[type="date"]::-webkit-inner-spin-button {
    z-index: 1;
}

 input[type="date"]::-webkit-clear-button {
     z-index: 1;
 }

function myFunc(){
document.getElementById('datePick').type = 'date';
  
}

JS:

<input type="text" name="startDate" id="datePick" class="input--small"  onkeydown="myFunc()" />

input[type="date"] {
    position: relative;
}

input[type="date"]:after {
    content: "\25BC"; 
    color: #555;
    padding: 0 10px;
}

/* change color of symbol on hover */input[type="date"]:hover:after {
    color: #bf1400;
}


input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 10px;
    left: 0px;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    color: transparent;
    background: transparent;
}

input[type="date"]::-webkit-inner-spin-button {
    z-index: 1;
}

 input[type="date"]::-webkit-clear-button {
     z-index: 1;
 }

function myFunc(){
document.getElementById('datePick').type = 'date';
  
}

---

我认为，使用本机html5输入type='Date'，不可能同时使用

打开日期选择器对话框

和

键入

。因为，当日期选择器被打开时，它被视为一个普通对话框，并且和任何单击外部的对话框一样，它将关闭对话框。所以，当你们想输入时，最好先在输入框中输入，若用户想从对话框中选择日期，他们可以点击选择器图标。。这是我的想法。这是第一次在日历里点击鼠标，它没有打开。