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.
You can target the icon by using the following css selector: `::-webkit-calendar-picker-indicator`

To increase the margin, use:

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

```html
<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.