html - 样式日期输入的值在手机(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" />

如何在桌面和移动设备上以一致的方式(我对 ~90% 的一致性感到满意)在 date 输入上显示我的日历图标和值？

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