Hide clock icon in FluentTimePicker

[cmsw97]

Hi.

I'm trying to remove the clock icon that appears on the right of the TimePicker component:

but seems there's no property to do that.

Looking at the DOM, the icon element is under a nested shadow root and I don't know how to select it in order to apply some style and hide it:

Finally, I've noticed that the clock icon appears on Chrome based explorers, but not on Firefox. I don't know if I can use that in my advantage somehow.

Any ideas?
Thanks!

[dvoituron]

The FluentDatePicker is a custom element where we can update part of the user interface.
But the FluentTimePicker uses the default HTML element input type="time" and it's not possible to easily customize the Browser icon.

You'll probably find a solution using -webkit-calendar-picker-indicator.
Example: https://dev.to/codeclown/styling-a-native-date-input-into-a-custom-no-library-datepicker-2in

.myTimeInput::-webkit-calendar-picker-indicator {    
    background-image: url("data:image/svg+xml;base64,PHN2Z...");
    background-size: 14px 14px;
    background-position: center;
}

[cmsw97]

Got it, thanks!