How to change text spacing in HTML time inputs?

I am making a time range selector, and using Bootstrap. It needs to be a specific fixed with so that it can fit with the other components. I’ve noticed that Firefox renders the text of a type="time" input slightly more spaced out than Chrome does, and that makes the text get cut off

The overall size of the text seems ok, but it’s the space between the numbers and the AM/PM that seems to be the real issue.

I did find that I can set word-spacing: -6px; letter-spacing: -1px; which makes Firefox look a bit better, but then it makes Chrome look worse due to everything being too close now.

Is there a way to change this to normalize it between browsers?

input[type="time"]::-webkit-calendar-picker-indicator {
  /*Hide the clock icon for time inputs in Webkit browsers*/
  display: none;
}

.time-range-selector{
  width: 14.5rem !important;
}

.adjusted-time-spacing {
  word-spacing: -6px;
  letter-spacing: -1px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"/>

<div class="container pt-4">
  Default
  <div class="mb-4 input-group time-range-selector">
    <input type="time" aria-label="Begin Time" class="form-control" value="08:00">
    <span class="input-group-text">-</span>
    <input type="time" aria-label="End Time" class="form-control" value="17:00">
  </div>
  
  Adjusted word/letter spacing
  <div class="input-group time-range-selector">
    <input type="time" aria-label="Begin Time" class="form-control adjusted-time-spacing" value="08:00">
    <span class="input-group-text">-</span>
    <input type="time" aria-label="End Time" class="form-control adjusted-time-spacing" value="17:00">
  </div>
</div>

You need to sign in to view this answers

Related Post