消除输入日期的差距答案

【问题标题】：Removing the gap in input date消除输入日期的差距
【发布时间】：2020-04-21 09:02:23
【问题描述】：

我正在尝试设置 input type='date' 的样式以占用更少的空间，但我不知道如何消除指示器和文本之间的间隙或如何让日期像文本字段一样缩小.

我已经用谷歌搜索了大约 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>

【问题讨论】：

如何消除指标和文本之间的间隙或如何让日期像文本字段一样缩小是什么意思？可以提供图片吗？
我想你应该去掉 x 并在需要时添加一个自定义的。这里有一个相关问题How to get rid of x and up/down arrow elements of a input date?。

标签： html css

【解决方案1】：

我认为这就是您（和我）一直在寻找的：

::-webkit-calendar-picker-indicator{
    margin-left: -25px;
}

感谢@clod9353 在HTML input date, how to decrease space between date and icon? 问题中的回答。

【讨论】：

【解决方案2】：

一个问题的解释有点困难，因为它没有很好地表达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>

【讨论】：