How to Style The Input Type "Time"

HTML - style input type time - change color of selection

No , It is not possible to give the other colors u can give the color to just the outer but inner part is not possible
Sample Image

How to change the clickable area of the input type=time / from the icon to the shown time?

Ok, I solved it.

Just added:

opacity: 0;
position: absolute;
width: 10%;
left:35%;

to the input[type='time']::-webkit-calendar-picker-indicator

so it is now

input[type='time']::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    width: 10%;
    left:35%;
}

How to change the time format (12/24 hours) of an input?

HTML5 Time Input

This one is the simplest of the date/time related types, allowing the user to select a time on a 24/12 hour clock, usually depending on the user's OS locale configuration. The value returned is in 24h hours:minutes format, which will look something like 14:30.

More details, including the appearance for each browser, can be found on MDN.

<input type="time" name="time">

How to select with css indicator in input type=time?

input[type="time"]{
    /**style goes here **/
 }

If you want to select the spinner (which you say "arrow") you can do that by the css below,

input[type="number"]::-webkit-inner-spin-button{
        /**style goes here **/
    }

But unfortunately this will work for chrome, but not for firefox, since firefox does not work with webkit engine,

Above all, I would like to suggest you, to make custom spinner (which you say "arrow") like this code link. Hope you will find the solution this way. :)

https://codepen.io/komarovdesign/pen/PPRbgb

Change input type='time' in dropdown

You can set the value of the time input, like so:

<input type="time" value="19:59">

Hide the icon on a HTML time input field in Chrome

Based on the answers to this question:
Change date input triangle to a calendar icon

We can see that we need to override the -webkit-calendar-picker-indicator pseudo-element, for example:

input[type="time"]::-webkit-calendar-picker-indicator {
    background: none;
}

Here it is in Chrome by default

Default time picker

Here it is with -webkit-calendar-picker-indicator background none

Background none picker

Of course you're hiding the fact there is a clickable picker so you may well want to think again about how you're displaying this if it's read only or do some more styling.

And to pull in Eiriks useful contribution from below, to remove the space completely add:

display:none;