8

I'm using some type="time" inputs to gather local times in a web app. It's important that the user can see which inputs they've included, and which inputs are not yet entered. In desktop Safari, I notice that webkit seems to automatically insert 12:30 PM as a default time. I want to have the user see clearly that there's currently no time in that field. I want to either find a way to not have ANY input appear when the user hasn't included a time themselves, or if that doesn't work, find a way to specifically target the fields that don't have input so I can change the styling to be clearly different (i.e. have transparent coloring).

My desired behavior is to have the empty input appear empty, as if hour/minute/meridian placeholder text was clear.

I can verify using the fiddle below that times appear correctly empty in all browsers I've tried other than desktop Safari. I have other code to adjust widths, but the fiddle's CSS is copied from the properties of one input for simplicity's sake.

Link to minimal recreation of the problem with current styling here: https://jsfiddle.net/1g92ek3z/1/.

developer
  • 89
  • 3

1 Answers1

1

This answer is related but trying to target the datepicker: How to customize html5 datepicker.

I've uncovered browser pseudo selectors that can be used to target the browser default elements in the time input:

::-webkit-datetime-edit,
::-webkit-datetime-edit-wrapper,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-meridiem-field

Beware - if you set display: none or visibility: hidden on these corresponding elements it also breaks the input functionality.

So my solution ended up changing the input color based on whether the field has a value and/or focus; something like:

input[type="time"]:not(.has-value):not(.focus-visible) {
  color: #EFEFF0;
}

...where has-value is a conditional class when the input has a value and focus-visible is a conditional class when the input has focus.

Nate Loftsgard
  • 111
  • 5