极客观点
项目管理
HarmonyOS
有没有办法在输入元素的焦点上激活本机 HTML5 日期选择器下拉菜单？
大输入元件：
![大输入 [type=date] 元素](https://i.stack.imgur.com/xPH42.png)
目前，我只能通过单击输入元素最右侧的箭头来使用日历。
大输入元素单击箭头
![Large Input[type=date] 元素 onClick of Arrow](https://i.stack.imgur.com/KeiLx.png)
我想在输入元素的焦点上激活此日历。
这是有问题的代码。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<style media="screen">
.form-question {
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 0 3rem;
min-height: 3rem;
}
.form-question__title {
color: #342357;
font-size: 1.5rem;
padding: 1rem;
}
.input-container {
border-bottom: solid 2px #333333;
}
.input-container input {
border: none;
box-sizing: border-box;
outline: 0;
padding: .75rem;
width: 100%;
}
</style>
<body>
<div class="form-question">
<div class="form-question__title">
<span>Effective Date</span>
</div>
<div class="input-container">
<input id="effective-date" type="date" name="effective-date" minlength="1" maxlength="64" placeholder=" " autocomplete="nope" required="required"></input>
<span class="bar"></span>
</div>
</div>
</body>
</html>
首选 CSS 解决方案，但欢迎使用 javascript，请不要使用 jQuery。
提前致谢！
原文由 MJ12358 发布，翻译遵循 CC BY-SA 4.0 许可协议
对于任何偶然发现这个问题的人，我通过使
calendar-picker-indicator成为输入的完整高度和宽度来解决它（只有 webkit firefox 似乎也尊重这一点），如此 处 概述。全宽可点击日历下拉菜单