在手机（iphone）上看不到样式日期输入的值

Question

我正在尝试使用字体包将自定义图标添加到html5输入date中。对于此示例，我使用的是FontAwesome，但实际上，我使用的是自定义字体包。

在移动设备上（我正在使用iPhone X），我可以看到日历图标，但看不到值。当我将:before更改为:after时，可以看到该图标，直到选择了一个值，然后才可以看到该值。我怀疑表示该值的阴影dom元素的设置宽度为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" />

我还尝试过position:absolute日历图标（下面的代码），该图标在我想要的iPhone上呈现，但在桌面浏览器上看起来像裤子。

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

如何在桌面和移动设备上的date输入上以一致的方式显示日历图标和值（我会为90％的一致性感到满意）？

iPhone屏幕快照

您可以从代码段中看到它们在桌面上的外观，因此下面是我在iPhone上的Safari中获得的屏幕截图。

我想要的

我得到的

Answer 1

继续发挥position:absolute的想法，并提出了以下“解决方案”。感觉很乱。有更好的解决方案吗？

input[type=date] {
  position: relative;
  text-indent: 15px;
  width: 160px;
}

input[type=date]:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  content: "\f274";
  position: absolute;
  top: 50%;
  left: -10px;
  transform: translateY(-50%);
}

<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" />
<input type="date" />