How to change text spacing in HTML time inputs?

Question

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/[email protected]/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>

Brett Donald · Accepted Answer · 2024-10-17 06:03:44Z

Updated answer

Do a CSS feature query using @supports and a property which is unique to Firefox (for example, -moz-appearance).

@supports (-moz-appearance:none) {
  .adjusted-time-spacing {
    word-spacing: -6px;
    letter-spacing: -1px;
  }
}

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

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

/* adjust spacing in firefox only */
@supports (-moz-appearance:none) {
  .adjusted-time-spacing {
    word-spacing: -6px;
    letter-spacing: -1px;
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>

Original answer

Do a CSS browser detect. It’s a hack, and it’s deprecated, but it works. In this case, the worst that can happen is that your spacing doesn’t get adjusted, so I’m happy to recommend it to you as a sensible approach.

/* adjust spacing in firefox only */
@-moz-document url-prefix() {
  .adjusted-time-spacing {
    word-spacing: -6px;
    letter-spacing: -1px;
  }
}

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

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

/* adjust spacing in firefox only */
@-moz-document url-prefix() {
  .adjusted-time-spacing {
    word-spacing: -6px;
    letter-spacing: -1px;
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>

Found a less hacky way to do this ... so I’ve updated this answer.

Collectives™ on Stack Overflow

How to change text spacing in HTML time inputs?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related