input[type="time"] のデザイン方法

Question

前提

React.jsにて
家電をOn, Offにする
システムを作っています。

実現したいこと

まずはAPIなどは置いておいて
下記のようなデザインを実装しておきたいのですが
Timeタグで色々触ってみたのですが
なかなかうまく行きません。
理想通りの見た目にするにはどのようにしたらいいでしょうか？

理想

自分のもの

該当のソースコード

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

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

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

Comments

[m.ts10806]

用途次第ですが、type=timeである必要はないと思います。
「理想」はどこのものですか？

[Tomato_leaf]

理想は携帯アプリのものです。
携帯アプリと同じデザインにしてくださいと
要望があり、ご質問させていただきました。

Answer 1

現状のブラウザの <input type="time"> のUIをもとに希望する見た目にするのは難しい気がします。

キーボード入力やポップアップUIが不要なのでしたら、 <input type="time"> を使わずに自分ですべてUIを作り上げるのが適切かと思います。

Comments

[Tomato_leaf]

なるほど。やはりそうですか。ありがとうございます。