Bug: inputs of type = "date" | "time" | "datetime-local" render with incorrect height and placeholder colors in Safari 14.1.2

[nstuyvesant]

• Operating system and version (Windows, macOS, Android, iOS): macOS 11.5.2
• Browser and version: Safari 14.1.2

Problems:

1. On Safari 14.1.2 on macOS 11.5.2 (the latest of both as of submitting this issue), HTML inputs of type = "date" | "time" | "datetime-local" have a default height of 34 whereas the default height of type="text" is 24. This causes the contents to be positioned in a way that will not align with contents of inputs of type text and it leaves an uneven amount of space between the border and the contents. For example:
   
2. Placeholders for inputs of "date" | "time" | "datetime-local" have delineator characters that appear in black such as "/", ":" and commas vs. the placeholder values that appear gray by default. Incidentally, Chrome displays placeholders for these input types in black whereas inputs of type text are gray.

Steps to reproduce:

1. Using Safari 14.1.2 on macOS 11.5.2, navigate to https://getbootstrap.com/docs/5.1/forms/form-control/#example
2. Hover over the email address field in the first example and right-click and pick Inspect Element
3. In the HTML sources, change

<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">

to

<input type="datetime-local" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">

and view the results in the Safari browser.

4. Try the same thing in Chrome and note the change in color of the placeholder from darkgray to black.
   
   to
   

[shikhar0512L]

YES

[Mushr0000m]

I can confirm this issue, also it might be a bug of Safari, this issue appears on other frameworks or even plain CSS if the input have a line-height and is of type date/time/datetime-local the final height is buggy

[tkrotoff]

See #34433 (duplicate)

[mdo]

Duplicate of #34433.