12

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

Is there a way to do that?

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

<input type="date">

8
  • 2
    you should include your code, so people can help you better
    – clod9353
    Dec 22, 2020 at 13:12
  • your code please ?
    – user_1330
    Dec 22, 2020 at 13:13
  • code added, its just the common input type date Dec 22, 2020 at 13:14
  • 1
    it is insufficient, it is not reproducible. where is the css, how did the icon arrive? Dec 22, 2020 at 13:18
  • 4
    @MisterJojo the icon is browser native
    – dippas
    Dec 22, 2020 at 13:20

3 Answers 3

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.

7
  • where is the icon ? Dec 22, 2020 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, 2020 at 13:39
  • try Firefox, this is bootstrap, this is supposed to be multi browsers compatible Dec 22, 2020 at 13:40
  • @MisterJojo Chrome has the icon for the input type date, it has nothing to do with bootstrap
    – clod9353
    Dec 22, 2020 at 13:43
  • and how am I supposed to guess? There was never a specific chrome icon in the question Dec 22, 2020 at 13:45
1

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.

0

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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.