HTML输入日期，如何减少日期和图标之间的空间? [英] HTML input date, how to decrease space between date and icon?

问题描述

我需要压缩输入类型的日期，所以我尝试将宽度设置为 120 像素.
问题是日期数字和输入日期图标之间有一个空格.

I need to compress an input type date, so i've tried setting the width to 120px.
The problem is that there's a space between the date numbers and the input date icon.

我需要减少或移除那个空间:

I need to decrease or remove that space:

有没有办法做到这一点?

Is there a way to do that?

我的代码(顺便说一句，我使用的是 bootstrap 4):

My code (I'm using bootstrap 4 btw):

<input type="date">

推荐答案

您可以使用:

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

如果这还不够，并且您想要更少的空间，只需设置一个负边距，就像在这个片段中一样:

If this is not enough, and you want even less space, just put a negative margin, like in this snippet:

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

<input type="date" >

注意:这适用于 Chrome.默认情况下，Firefox(可能还有其他浏览器)可能不会显示该图标.

Note: This works in Chrome. Firefox (and possibly other browsers) may not show the icon by default.

这篇关于HTML输入日期，如何减少日期和图标之间的空间?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！