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

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.

Answer 3

Correct way to use icons on <input type="date"
with bootstrap 4
Boostrapt icon calandar : https://icons.getbootstrap.com/icons/calendar/
sample code:
input[type="date"]::-webkit-calendar-picker-indicator {
position : absolute;
left : 0;
margin : 0;
width : 2em;
transform: translateX(-2.5em);
opacity : 0;
}
form { margin:1em }
<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
Method to show native datepicker in Chrome