HTML input date, how to decrease space between date and icon?

Question

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?

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

<input type="date">

Answer 1

You can use:

::-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" >

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

Answer 2

You can target the icon by using the following css selector: ::-webkit-calendar-picker-indicator

To increase the margin, use:

input[type=date]::-webkit-calendar-picker-indicator {
  margin-left: 100px;
}

<input type="date">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

To decrease the space, use a negative margin, or any other option.