How to design input[type="time"]?

Viewed 24

I would like to implement a design like the one below enter image description here

I tried various things with the Time tag. It doesn't go very well. How can I make it look ideal?

This is my Code

React.js

            <p>Set Start Time</p>
            <input id="appt-time" type="time" name="appt-time"/>
            <p>Set End Time</p>
            <input id="appt-time" type="time" name="appt-time"/>

CSS

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

input[type="time"] {
  background-color: #022055;
  color: white;
}

and looks like that now...

enter image description here

0 Answers
Related