现在我的重点是让Google Chrome中的输入[type=“date”]显示日历图标（.png），而不是默认使用的向下三角形。我曾尝试在输入中设置阴影元素的样式，但这需要我在所有其他元素周围移动，因为这些元素使用flexbox，所以看起来并不简单。我希望日历图标也能一直显示出来，但我还没有想出一个方法来做到这一点。
下面的代码对我有用
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" />
@Aware有最好的例子，但Chrome59不喜欢使用：：after on:：-webkit日历选择器指示器。因此，这里有一个调整，我使用了令人敬畏的图标，实现了相同的目标。
input[type="date"] {
position: relative;
padding: 10px;
}
input[type="date"]::-webkit-calendar-picker-indicator {
color: transparent;
background: none;
z-index: 1;
}
input[type="date"]:before {
color: transparent;
background: none;
display: block;
font-family: 'FontAwesome';
content: '\f073';
/* This is the calendar icon in FontAwesome */
width: 15px;
height: 20px;
position: absolute;
top: 12px;
right: 6px;
color: #999;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<input type="date">