将日期输入三角形更改为日历图标

Question

现在，我专注于在 Google Chrome 中获取 input[type="date"] 以显示日历图标 (.png)，而不是默认使用的向下三角形。我尝试对输入 中的 Shadow 元素进行样式设置，但这需要我围绕所有其他元素进行转换，并且由于这些元素使用的是 flexbox，因此看起来并不是很简单。我希望也一直显示日历图标，但我还没有想出办法做到这一点。

原文由 Ilan Biala 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

下面的代码对我有用

 input[type="date"]::-webkit-calendar-picker-indicator {
    color: rgba(0, 0, 0, 0);
    opacity: 1;
    display: block;
    background: url(https://mywildalberta.ca/images/GFX-MWA-Parks-Reservations.png) no-repeat;
    width: 20px;
    height: 20px;
    border-width: thin;
}

 <input type="date" />

原文由 Oscar Fuquen 发布，翻译遵循 CC BY-SA 3.0 许可协议