How to change date picker icon color of HTML form in 2 easy steps

This blog will explain about how we can easily change the date picker icon of a date field in Bootstrap or HTML Form. To change the color of the date picker’s icon, we cannot directly style it with CSS since browsers generate the date input element’s appearance. However, we can use a workaround to create a custom date picker icon that matches our design.

Scenario of Problem

Recently one of our client website asked us to add a date picker in his “Appointment Booking” form. We developed his website in Dark form (means dark screen) view. So whole website background is dark and html form fields has white place holder with white borders.

You can see in above image the date field picker icon is not visible (its actually black in color, so not visible)

How to do it / Approach

Step 1 : Hide the native date picker icon

We can hide the default date picker icon and add your own icon using background CSS.

Step 1 : Updated the code:

so below code we using in our date field form

<div class="input-group">
        <label>Select Date</label>
        <input type="date" name="date" placeholder="Select date" required>
</div>

You can use your own code, no need to replace. Just use a this class “custom-date-picker” in your Input Tag to show date picker icon. So after adding this class, updated code will be :

<div class="input-group">
        <label>Select Date</label>
        <input type="date" name="date" placeholder="Select date" class="custom-date-picker" required>
</div>

Step 2 : Add CSS

After updating the code, add below CSS in your CSS file

.custom-date-picker {
    appearance: none; /* Removes the default appearance */
    -webkit-appearance: none; /* For Safari */
    position: relative;
    padding: 10px 40px 10px 10px; /* Adds padding to make room for the icon */
    background-color: #000; /* Ensures the input's background matches */
    color: #fff; /* White text color */
    border: 1px solid #fff; /* White border */
    border-radius: 5px;
}

/* This makes the original calendar icon invisible while keeping it clickable */
.custom-date-picker::-webkit-calendar-picker-indicator {
    opacity: 0;
    display: block;
    position: absolute;
    right: 10px;
    width: 20px;
    height: 100%;
    cursor: pointer;
}

/* Custom white icon overlay */
.custom-date-picker:before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="white" viewBox="0 0 24 24"><path d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-1.99.9-1.99 2L3 20c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zM7 12h5v5H7z"/></svg>');
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none; /* Makes the icon non-clickable but allows the input's functionality */
}

Save and refresh your Page, Calendar icon will be displayed.

Explanation of the Code

1. Basic Styling for the Input Field

First, we need to style the input field. This includes removing the browser’s default styles, changing the background to black and making the text white for better contrast.

.custom-date-picker {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    padding: 10px 40px 10px 10px;
    background-color: #000;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 5px;
}

• appearance: none;: Removes the default browser styles.
• padding: 10px 40px 10px 10px;: Adds space for the custom icon we’ll add later.
• background-color: #000;: Sets a black background to match the dark theme.
• color: #fff;: Changes the text color to white for better readability.
• border: 1px solid #fff;: Adds a white border to make the input field stand out.
• border-radius: 5px;: Rounds the corners for a more modern look.

2. Hiding the Default Calendar Icon

Next, we hide the default calendar icon provided by the browser, but we still keep it functional so that clicking it opens the date picker.

.custom-date-picker::-webkit-calendar-picker-indicator {
    opacity: 0;
    display: block;
    position: absolute;
    right: 10px;
    width: 20px;
    height: 100%;
    cursor: pointer;
}

• opacity: 0;: Makes the default icon invisible, but still clickable.
• position: absolute;: Ensures the invisible icon stays positioned inside the input field.
• cursor: pointer;: Ensures the user sees a clickable pointer icon.

3. Adding a Custom White Calendar or date picker Icon

Now we add a white calendar icon using the :before pseudo-element. This will visually replace the invisible default icon.

.custom-date-picker:before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="white" viewBox="0 0 24 24"><path d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-1.99.9-1.99 2L3 20c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zM7 12h5v5H7z"/></svg>');
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

• content: url(…);: Inserts an SVG icon (a white calendar in this case).
• position: absolute;: Positions the custom icon within the input field.
• top: 50%; transform: translateY(-50%);: Vertically centers the icon.
• pointer-events: none;: Ensures the icon is non-interactive, so clicking it doesn’t interfere with the input’s functionality.

Summary

By applying these styles, you get a clean, dark-themed date picker icon input field with a custom white calendar icon. Here’s what each step does:

1. Style the input field to match your theme.
2. Hide the default icon but keep it functional.
3. Add a custom white icon to visually replace the default one.

This ensures your form looks great on a dark background while keeping the date picker functionality intact. So that’s all folks. For anything else, there always our support team to connect.

Happy Coding.