有没有办法在输入元素的焦点上激活 native HTML5 日期选择器下拉菜单？
大输入元素:
![Large Input[type=date] Element](/image/xPH42.png)
目前我只能通过点击输入元素最右侧的箭头来使用日历。
大输入元素点击箭头
![Large Input[type=date] Element onClick of Arrow](/image/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。
提前致谢!
最佳答案
对于任何偶然发现这个问题的人，我通过将 calendar-picker-indicator 设置为完整的高度和宽度来解决它(仅限 webkit firefox 似乎也尊重这一点)输入，如概述here .
.input-container input {
border: none;
box-sizing: border-box;
outline: 0;
padding: .75rem;
position: relative;
width: 100%;
}
input[type="date"]::-webkit-calendar-picker-indicator {
background: transparent;
bottom: 0;
color: transparent;
cursor: pointer;
height: auto;
left: 0;
position: absolute;
right: 0;
top: 0;
width: auto;
}<input type="date">
关于javascript - 输入 [type ="date"] 处于焦点时如何显示日历弹出窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51334960/