入力の読み取り専用状態と無効状態を区別する
最初は読み取り専用のテキストボックスを使用して、ユーザーが入力できず、ドロップダウンから時間を選択する必要があることを示すタイムピッカーを実装しようとしています。 
問題は、事前に入力された値がある場合です。ユーザーはこれが無効な入力であると考えるかもしれません。 
では、無効状態と読み取り専用状態の入力を区別して、ユーザーが混乱しないようにするにはどうすればよいですか。
注：現在、私はそれらを示すために異なる灰色の陰影を考えています。たとえば、無効状態の暗い灰色と読み取り専用の明るい灰色です。繰り返しになりますが、両方を同時に使用している場合は、ほとんどの場合そうではない可能性があります。
まず、適切なグレーの色合いを使用していない。淡い灰色は無効に、暗い灰色は読み取り専用に使用する必要があります（そのため、それらは有効なフィールドのように見えます）。
フィールドがインタラクティブである場合、異なるスタイルを設定する必要はありません。通常の入力フィールドとして表示されます。
2番目の注意：キーボードを使いやすいユーザーについて考え、時間も入力できるようにします。調査によると、ユーザーが選択範囲を上書きできるようにすると、タスクの完了が速くなります。
更新
これは NNGroup からのものです。
日付を入力することは、日付入力の最も基本的なオプションですが、多くの場合、特に日付がより離れている場合、最も効率的な方法です。過去（例：誕生日）または未来。他の入力方法を使用できる場合でも、ユーザーが日付を入力できるようにすることをお勧めします。
Chromeブラウザでは、読み取り専用の入力は、完全な不透明度のテキスト色と低い不透明度の境界線でレンダリングされます。
無効な入力の場合、テキストと境界線の両方の不透明度が低くなります。
JSFiddle 。
あなたの場合、テキストの色は通常の入力のようにレンダリングされ、クリックすると主な違いが表示されるため、操作する前に入力を見たユーザーはそれほど問題になりません。そして、私が正しく理解していれば、それまでにピッカーをトリガーします。