{"id":4295,"date":"2024-10-18T16:32:49","date_gmt":"2024-10-18T16:32:49","guid":{"rendered":"https:\/\/scriptfeeds.com\/blog\/?p=4295"},"modified":"2024-10-18T16:32:52","modified_gmt":"2024-10-18T16:32:52","slug":"change-date-picker-icon-color-of-form","status":"publish","type":"post","link":"https:\/\/scriptfeeds.com\/blog\/development\/change-date-picker-icon-color-of-form\/","title":{"rendered":"How to change date picker icon color of HTML form in 2 easy steps"},"content":{"rendered":"\n<p>This blog will explain about how we can easily change the date picker icon of a date field in <strong><a href=\"https:\/\/getbootstrap.com\/docs\/4.0\/components\/forms\/\" target=\"_blank\" rel=\"noopener\">Bootstrap <\/a><\/strong>or HTML Form. To change the color of the date picker&#8217;s icon, we cannot directly style it with CSS since browsers generate the date input element&#8217;s appearance. However, we can use a <strong>workaround<\/strong> to create a custom date picker icon that matches our design.<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li><a href=\"#scenario-of-problem\">Scenario of Problem<\/a><\/li><li><a href=\"#how-to-do-it-approach\">How to do it \/ Approach<\/a><ul><li><a href=\"#step-1-hide-the-native-date-picker-icon\">Step 1 : Hide the native date picker icon<\/a><\/li><li><a href=\"#step-1-updated-the-code\">Step 1 : Updated the code:<\/a><\/li><li><a href=\"#step-2-add-css\">Step 2 : Add CSS<\/a><\/li><\/ul><\/li><li><a href=\"#explanation-of-the-code\">Explanation of the Code<\/a><ul><li><a href=\"#1-basic-styling-for-the-input-field\">1. Basic Styling for the Input Field<\/a><\/li><li><a href=\"#2-hiding-the-default-calendar-icon\">2. Hiding the Default Calendar Icon<\/a><\/li><li><a href=\"#3-adding-a-custom-white-calendar-icon\">3. Adding a Custom White Calendar or date picker Icon<\/a><\/li><\/ul><\/li><li><a href=\"#summary\">Summary<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-medium-font-size\" id=\"scenario-of-problem\"><strong>Scenario of Problem<\/strong><\/h2>\n\n\n\n<p>Recently one of our client website asked us to add a date picker in his &#8220;Appointment Booking&#8221; 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.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" width=\"1024\" height=\"233\" src=\"https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/10\/image-1-1024x233.png\" alt=\"Date picker icon not visible\" class=\"wp-image-4298\" title=\"Date picker fields has white place holder with white borders.\" srcset=\"https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/10\/image-1-1024x233.png 1024w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/10\/image-1-300x68.png 300w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/10\/image-1-150x34.png 150w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/10\/image-1-768x174.png 768w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/10\/image-1-1536x349.png 1536w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/10\/image-1-2048x465.png 2048w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/10\/image-1-750x170.png 750w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/10\/image-1-1140x259.png 1140w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>You can see in above image the <strong>date field picker icon is not visible<\/strong> (its actually black in color, so not visible)<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-medium-font-size\" id=\"how-to-do-it-approach\"><strong>How to do it \/ Approach<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading has-medium-font-size\" id=\"step-1-hide-the-native-date-picker-icon\"><strong>Step 1 : Hide the native date picker icon<\/strong><\/h3>\n\n\n\n<p>We can hide the default date picker icon and add your own icon using <code>background<\/code> CSS.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-medium-font-size\" id=\"step-1-updated-the-code\"><strong>Step 1 : Updated the code:<\/strong><\/h3>\n\n\n\n<p>so below code we using in our date field form<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"input-group\">\n        &lt;label>Select Date&lt;\/label>\n        &lt;input type=\"date\" name=\"date\" placeholder=\"Select date\" required>\n&lt;\/div><\/code><\/pre>\n\n\n\n<p>You can use your own code, no need to replace. <strong>Just use a this class &#8220;custom-date-picker&#8221;<\/strong> in your Input Tag to show date picker icon. So after adding this class, updated code will be :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"input-group\">\n        &lt;label>Select Date&lt;\/label>\n        &lt;input type=\"date\" name=\"date\" placeholder=\"Select date\" class=\"custom-date-picker\" required>\n&lt;\/div><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading has-medium-font-size\" id=\"step-2-add-css\"><strong>Step 2 : Add CSS<\/strong><\/h3>\n\n\n\n<p>After updating the code, add below CSS in your CSS file<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.custom-date-picker {\n    appearance: none; \/* Removes the default appearance *\/\n    -webkit-appearance: none; \/* For Safari *\/\n    position: relative;\n    padding: 10px 40px 10px 10px; \/* Adds padding to make room for the icon *\/\n    background-color: #000; \/* Ensures the input's background matches *\/\n    color: #fff; \/* White text color *\/\n    border: 1px solid #fff; \/* White border *\/\n    border-radius: 5px;\n}\n\n\/* This makes the original calendar icon invisible while keeping it clickable *\/\n.custom-date-picker::-webkit-calendar-picker-indicator {\n    opacity: 0;\n    display: block;\n    position: absolute;\n    right: 10px;\n    width: 20px;\n    height: 100%;\n    cursor: pointer;\n}\n\n\/* Custom white icon overlay *\/\n.custom-date-picker:before {\n    content: url('data:image\/svg+xml;utf8,&lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" fill=\"white\" viewBox=\"0 0 24 24\">&lt;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\"\/>&lt;\/svg>');\n    position: absolute;\n    right: 10px;\n    top: 50%;\n    transform: translateY(-50%);\n    pointer-events: none; \/* Makes the icon non-clickable but allows the input's functionality *\/\n}\n<\/code><\/pre>\n\n\n\n<p>Save and refresh your Page, Calendar icon will be displayed.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"966\" height=\"550\" src=\"https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/10\/image-2.png\" alt=\"date picker icon visible\" class=\"wp-image-4303\" srcset=\"https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/10\/image-2.png 966w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/10\/image-2-283x161.png 283w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/10\/image-2-142x81.png 142w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/10\/image-2-768x437.png 768w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2024\/10\/image-2-750x427.png 750w\" sizes=\"(max-width: 966px) 100vw, 966px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading has-medium-font-size\" id=\"explanation-of-the-code\"><strong>Explanation of the Code<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading has-medium-font-size\" id=\"1-basic-styling-for-the-input-field\"><strong>1. Basic Styling for the Input Field<\/strong><\/h3>\n\n\n\n<p>First, we need to style the input field. This includes removing the browser\u2019s default styles, changing the background to black and making the text white for better contrast.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.custom-date-picker {\n    appearance: none;\n    -webkit-appearance: none;\n    position: relative;\n    padding: 10px 40px 10px 10px;\n    background-color: #000;\n    color: #fff;\n    border: 1px solid #fff;\n    border-radius: 5px;\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>appearance: none;<\/strong>: Removes the default browser styles.<\/li>\n\n\n\n<li><strong>padding: 10px 40px 10px 10px;<\/strong>: Adds space for the custom icon we&#8217;ll add later.<\/li>\n\n\n\n<li><strong>background-color: #000;<\/strong>: Sets a black background to match the dark theme.<\/li>\n\n\n\n<li><strong>color: #fff;<\/strong>: Changes the text color to white for better readability.<\/li>\n\n\n\n<li><strong>border: 1px solid #fff;<\/strong>: Adds a white border to make the input field stand out.<\/li>\n\n\n\n<li><strong>border-radius: 5px;<\/strong>: Rounds the corners for a more modern look.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading has-medium-font-size\" id=\"2-hiding-the-default-calendar-icon\"><strong>2. Hiding the Default Calendar Icon<\/strong><\/h3>\n\n\n\n<p>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.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.custom-date-picker::-webkit-calendar-picker-indicator {\n    opacity: 0;\n    display: block;\n    position: absolute;\n    right: 10px;\n    width: 20px;\n    height: 100%;\n    cursor: pointer;\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>opacity: 0;<\/strong>: Makes the default icon invisible, but still clickable.<\/li>\n\n\n\n<li><strong>position: absolute;<\/strong>: Ensures the invisible icon stays positioned inside the input field.<\/li>\n\n\n\n<li><strong>cursor: pointer;<\/strong>: Ensures the user sees a clickable pointer icon.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading has-medium-font-size\" id=\"3-adding-a-custom-white-calendar-icon\"><strong>3. Adding a Custom White Calendar or date picker Icon<\/strong><\/h3>\n\n\n\n<p>Now we add a white calendar icon using the <code>:before<\/code> pseudo-element. This will visually replace the invisible default icon.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.custom-date-picker:before {\n    content: url('data:image\/svg+xml;utf8,&lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" fill=\"white\" viewBox=\"0 0 24 24\">&lt;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\"\/>&lt;\/svg>');\n    position: absolute;\n    right: 10px;\n    top: 50%;\n    transform: translateY(-50%);\n    pointer-events: none;\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>content: url(&#8230;);<\/strong>: Inserts an SVG icon (a white calendar in this case).<\/li>\n\n\n\n<li><strong>position: absolute;<\/strong>: Positions the custom icon within the input field.<\/li>\n\n\n\n<li><strong>top: 50%; transform: translateY(-50%);<\/strong>: Vertically centers the icon.<\/li>\n\n\n\n<li><strong>pointer-events: none;<\/strong>: Ensures the icon is non-interactive, so clicking it doesn&#8217;t interfere with the input\u2019s functionality.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"summary\"><strong>Summary<\/strong><\/h2>\n\n\n\n<p>By applying these styles, you get a clean, dark-themed date picker icon input field with a custom white calendar icon. Here&#8217;s what each step does:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Style the input field<\/strong> to match your theme.<\/li>\n\n\n\n<li><strong>Hide the default icon<\/strong> but keep it functional.<\/li>\n\n\n\n<li><strong>Add a custom white icon<\/strong> to visually replace the default one.<\/li>\n<\/ol>\n\n\n\n<p>This ensures your form looks great on a dark background while keeping the date picker functionality intact. So that&#8217;s all folks. For anything else, <strong><a href=\"https:\/\/scriptfeeds.com\/blog\/hire-us\/\">there always our support team to connect<\/a><\/strong>.<\/p>\n\n\n\n<p><strong>Happy Coding.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8217;s icon, we cannot directly style it with CSS since browsers generate the date input element&#8217;s appearance. However, we can use a workaround to create [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4304,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jnews-multi-image_gallery":[],"jnews_single_post":{"format":"standard"},"jnews_primary_category":[],"footnotes":""},"categories":[71,184],"tags":[426,425],"class_list":["post-4295","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","category-frontend-design-development","tag-change-date-icon-color","tag-change-icon-color-in-form"],"_links":{"self":[{"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/posts\/4295","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/comments?post=4295"}],"version-history":[{"count":0,"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/posts\/4295\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/media\/4304"}],"wp:attachment":[{"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/media?parent=4295"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/categories?post=4295"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/tags?post=4295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}