How to remove the default time (12:30 PM) in desktop Safari?

Question

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/.

Sacker

Answer 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.

Notornis

Answer 2

Here is my solution, this is the most visually pleasing example for me.

I made a js script that will assign the "has-value" class to an input when a value appears in it.

input[type='time']:not(.has-value) {
    &::-webkit-datetime-edit-hour-field,
    &::-webkit-datetime-edit-text,
    &::-webkit-datetime-edit-minute-field {
        &:not(:focus) {
            opacity: 0.3;
        }
    }
}

Hooker