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

it is insufficient, it is not reproducible. where is the css, how did the icon arrive? — Mister Jojo, Dec 22 '20 at 13:18
it is still not reproducible; read https://stackoverflow.com/help/minimal-reproducible-example. I added a snippet in your code for helping you — Mister Jojo, Dec 22 '20 at 13:28
@dippas this is wrong, there is no standard for all browsers to show an icon on input dates natively. — Mister Jojo, Dec 22 '20 at 13:48
next time indicate that you want to fix this problem only on Chrome, you will save others from wasting time unnecessarily. — Mister Jojo, Dec 22 '20 at 13:51

clod9353 · Accepted Answer · 2020-12-22T13:50:10.243

24

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.

edited Dec 22 '20 at 13:50

answered Dec 22 '20 at 13:28

clod9353

1,942
2
5
20

where is the icon ? – Mister Jojo Dec 22 '20 at 13:37
@MisterJojo I can see the icon like in the picture in the question. I'm using chrome. Maybe on some browser it's not present? – clod9353 Dec 22 '20 at 13:39
try Firefox, this is bootstrap, this is supposed to be multi browsers compatible – Mister Jojo Dec 22 '20 at 13:40
@MisterJojo Chrome has the icon for the input type date, it has nothing to do with bootstrap – clod9353 Dec 22 '20 at 13:43
and how am I supposed to guess? There was never a specific chrome icon in the question – Mister Jojo Dec 22 '20 at 13:45
When the question was asked, it didn't say anything about bootstrap either. I opened in chrome and I could see the icon. I didn't know firefox doesn't show it – clod9353 Dec 22 '20 at 13:50
It's not just Chrome in life, and not everyone wants to feed Google databases with their personal data. – Mister Jojo Dec 22 '20 at 13:57

score 1 · Answer 2 · answered Dec 22 '20 at 13:32

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.

Mister Jojo · Answer 3 · 2020-12-22T19:16:09.560

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

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

3 Answers3

Correct way to use icons on <input type="date" with bootstrap 4

Linked