html5日期输入字段旁边的图标

Question

我的要求是在html5日期输入字段旁边显示一个日期（日历）图标，然后单击该图标将弹出一个日期选择器。 html5日期输入字段的当前状态： Edge和Firefox浏览器没有日期（日历）图标。 IE11有其自己的日期图标。 Chrome有自己的日期箭头。

以下代码适用于Edge和firefox浏览器。 IE11显示自己的日期图标，并带有我的图标。 如何在IE11或Chrome浏览器中隐藏我的图标？

https://jsfiddle.net/albertkao/307pw498/4/

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="form-group">
    <input class="form-control" type="date" id="startdate" name="startdate" />
    <label for="startdate">
        <span class="fa fa-calendar">
            <abbr title="Four digits year, dash, two digits month, dash, two digits day">
            </abbr>
        </span>
    </label>
</div>

预期结果：

所有浏览器在html5日期输入字段旁边显示一个日期图标。

实际结果：

Edge和firefox浏览器在html5日期输入字段旁边显示一个日期图标（良好）。 IE11显示自己的日期图标，并带有我的图标。 Chrome会显示自己的日期箭头和我的图标。