My goal is to enhance the appearance of an HTML5 input with a custom icon, using a font pack. Although I mention FontAwesome in this example, in reality, I'm utilizing a different custom font pack.
On my mobile device (iPhone X), I can see the calendar icon but not the value. Switching from :before to :after allows me to view the icon until a value is selected, then only the value is displayed. It appears that a shadow DOM element containing the value is restricting the width to 100%.
input[type="date"]:before {
font-family: "Font Awesome 5 Free";
font-weight: 400;
content: "\f274";
margin-right: 10px;
color: blue;
}<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" />
<input type="date" />I've also attempted to use position:absolute for the calendar icon (shown in the code below). While it displays correctly on iPhone, it doesn't render well on a desktop browser.
input[type=date] {
position: relative;
text-indent: 2em;
width: 170px;
}
input[type=date]:before {
font-family: "Font Awesome 5 Free";
font-weight: 400;
content: "\f274";
position: absolute;
top: 50%;
left: -1.25em;
transform: translateY(-50%);
}<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" />
<input type="date" />How can I ensure that my calendar icon and values are consistently displayed on both desktop and mobile for date inputs? Approximately 90% consistency would be acceptable to me.
iPhone Screenshots
In the provided code snippets, you can observe the desktop display. Here are screenshots depicting how it appears in Safari on my iPhone.
Expected Display
https://i.sstatic.net/Hxpes.jpg
Current Display