CSS for Styling HTML5 Date Input Calendar in Chrome

Change color of Chrome's calendar icon in HTML Date Input

I've managed to work around it for now using a CSS filter to invert the black color to white

::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

However this feels quite fragile and far from ideal.

Styling input[type=date] in chrome

This is a chrome bug which you can read about here:

Chrome Input Date Bug

apparently fixed, but can't managed to make it work their patch here:

http://trac.webkit.org/changeset/141195

your quick solution right now is set width to minimum 130px

UPDATE: see this answer, it might help you: https://stackoverflow.com/a/15107073/3448527

Are there any style options for the HTML5 Date picker?

The following eight pseudo-elements are made available by WebKit for customizing a date input’s textbox:

::-webkit-datetime-edit
::-webkit-datetime-edit-fields-wrapper
::-webkit-datetime-edit-text
::-webkit-datetime-edit-month-field
::-webkit-datetime-edit-day-field
::-webkit-datetime-edit-year-field
::-webkit-inner-spin-button
::-webkit-calendar-picker-indicator

So if you thought the date input could use more spacing and a ridiculous color scheme you could add the following:

::-webkit-datetime-edit { padding: 1em; }::-webkit-datetime-edit-fields-wrapper { background: silver; }::-webkit-datetime-edit-text { color: red; padding: 0 0.3em; }::-webkit-datetime-edit-month-field { color: blue; }::-webkit-datetime-edit-day-field { color: green; }::-webkit-datetime-edit-year-field { color: purple; }::-webkit-inner-spin-button { display: none; }::-webkit-calendar-picker-indicator { background: orange; }

<input type="date">

HTML5 date picker with small width doesn't show full date in Chrome

yeah, you can set margin: 0 for calendar-picker:

input[type="date"]::-webkit-calendar-picker-indicator {
    margin: 0;
}

<input type="date" id="myDate" name="trip-start"
       min="2014-01-01" max="2021-12-31">

CSS styling for input[type='date'] for browsers other than Chrome

By using F12 developer tools to check the HTML and CSS, we can see that Chrome browser using user agent sytelsheet and these pseudo-elements (::-webkit) apply to chrome browser, but in Microsoft Edge browser, it's not using user agent sytelsheet, and these pseudo-elements aren't applied to the input date textbox. So, the code not working in Microsoft Edge.

So, I think you could try to use Microsoft Edge Dev version (chromium based), the code works well on it.

Otherwise, as a workaround, I suggest you could refer to the following code to use text box and datepicker plugin to display the date.

<style>
    .input-field {
        position: relative;
        display: inline-block;
    }

        .input-field > label {
            position: absolute;
            left: 0.5em;
            top: 50%;
            margin-top: -0.5em;
            opacity: 0.5;
        }

        .input-field > input[type=text]:focus + label {
            display: none;
        }

        .input-field > label > span {
            letter-spacing: -2px;
        }

    .month {
        color: cornflowerblue;
    }

    .day {
        color: aqua;
    }

    .year {
        color:darkmagenta
    }

    .separate-letter {
        color: red
    }
</style>
<link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<div class="input-field">
    <input id="input-text-field" type="text" class="date" data-selecteddate="" value="" />
    <label for="input-text-field">
        <span id="span_month" class="month">MM</span>
        <span class="separate-letter">/</span>
        <span  id="span_day" class="day">DD</span>
        <span class="separate-letter">/</span>
        <span id="span_year"  class="year">YYYY</span>
    </label>
</div>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script>
    $(function ($) {
        $(".date").datepicker({
            onSelect: function (dateText) {
                //display("Selected date: " + dateText + "; input's current value: " + this.value);
                var dataarray = dateText.split("/")
                $("#span_month").html(dataarray[0]);
                $("#span_day").html(dataarray[1]);
                $("#span_year").html(dataarray[2]);

                //clear the textbox value
                this.value = "";
                $("#input-text-field").attr("data-selecteddate", dateText);
            }
        })            
    });
</script>

The result like this (using Microsoft Edge browser):

Sample Image