我试图将输入类型设置为"日期"以占用更少的空间，但我不知道如何消除指示符和文本之间的间隙，也不知道如何允许日期像文本字段一样缩小。
我在谷歌上搜索了大约3个小时，只发现了这个：https://www.tjvantoll.com/2013/04/15/list-of-pseudo-elements-to-style-form-controls/#input_date
这两者都不允许我消除差距。
input[type="date"]
{
background: lime;
}
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field,
input[type="date"]::-webkit-calendar-picker-indicator
{
padding: 0;
margin: 0;
}
input[type="date"]::-webkit-inner-spin-button
{
display: none;
}<html>
<body>
<input type='date' value='2020-04-21'>
</body>
</html>我想这就是你(和我(想要的：
::-webkit-calendar-picker-indicator{
margin-left: -25px;
}
感谢@clod9353在HTML输入日期中的回答，如何减少日期和图标之间的空间？问题
解释一个问题有点困难，因为它没有很好地阐明to be shrunk like a text field的含义。
让一切变得更小
您可以使用zoom: 0.5;或transform: scale(0.5);通过CSS缩小输入。
关于复选框大小的相关答案https://stackoverflow.com/a/44626004/906265
正如上面的答案一样，zoom在某些浏览器上看起来更好，但我并没有测试它。
// @supports https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
// zoom property https://developer.mozilla.org/en-US/docs/Web/CSS/zoom
// transfrom property https://developer.mozilla.org/en-US/docs/Web/CSS/transform
@supports (zoom:2) {
input[type="date"] { background: lime; zoom: 0.5; }
}
@supports not (zoom:2) {
input[type="date"] { background: lime; transform: scale(0.5); }
}<html>
<body>
<input type='date' value='2020-04-21'>
</body>
</html>