An icon next to the html5 date input field

HTML-CSS
1

My requirement is to display a date (calendar) icon next to the html5 date input field and clicking the icon will popup a date picker.
Current status for the html5 date input field:
Edge and firefox browsers does not have an date (calendar) icon.
IE11 has its own date icon.
Chrome has its own date arrow.

I try these codes.
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>

Expected results:
All browsers display a date icon next to the html5 date input field.

Actual results:
Edge and firefox browsers display a date icon next to the html5 date input field (good).
IE11 display its own date icon, with my icon.
Chrome display its own date arrow, with my icon.

How to hide my icon in IE11 or Chrome browsers?

2

Since your input lacks a text label the only indications that it is a date field is the placeholder text and the icon, I think it’s fine.
In your fiddle:

  1. In firefox I saw the native icon appear briefly before your icon covered it perfectly. When I removed your icon I did not see the native icon.

  2. In Chrome the arrows in the date input box only appear on focus or on hover so no problem there. Leave the icon.

  3. For IE google “conditional comments” they go in the document head, usually, and only work in Microsoft browsers.

You have yet to provide an alternate date picker so there is nothing to pop-up yet. IMO use all the native date pickers you can

In your HTML get rid of the abbr and put the title on the span. However, even the span isn’t necessary. Everything can go in the <label>.

<label for="startdate"
class="fa fa-calendar"
title="Four digits year, dash, two digits month, dash, two digits day">
</label>
3

Thanks for your comment.
My code use all the native date pickers.
Your code is simpler.
Conditional comments are no longer supported in IE10 and IE11.