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:

[![enter image description here](https://i.stack.imgur.com/fMJnl.png)](https://i.stack.imgur.com/fMJnl.png)

Is there a way to do that?

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

```html
<input type="date">
```

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

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

```html
<input type="date" >
```

**Note:** This works in Chrome. Firefox (and possibly other browsers) may not show the icon by default.
Correct way to use icons on <input type="date"
with bootstrap 4
===============================================================

Boostrapt icon calandar : <https://icons.getbootstrap.com/icons/calendar/>

sample code:

```css
input[type="date"]::-webkit-calendar-picker-indicator {
  position : absolute;
  left     : 0;
  margin   : 0;
  width    : 2em;
  transform: translateX(-2.5em);
  opacity  : 0;
  }

form { margin:1em }
```

```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" />

<form>
  <div class="form-row align-items-center">
    <div class=""> <!-- col-sm-3 my-1-->
        <div class="input-group">
        <div class="input-group-prepend">
          <label for="DteInput" class="input-group-text">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
          </svg></label>
        </div>
        <input type="date" class="form-control" id="DteInput" placeholder="">
      </div>
    </div>
  </div>
</form>
```

of course, you have to fight a bit for the chrome icon interference

see:  

[Method to show native datepicker in Chrome](https://stackoverflow.com/questions/15530850/method-to-show-native-datepicker-in-chrome/45461709#45461709)

[Method to show native datepicker in Chrome](https://stackoverflow.com/questions/15530850/method-to-show-native-datepicker-in-chrome/31413985#31413985)