How to Style an HTML5 Date Input Calendar in Chrome Using CSS

Can I customize the appearance of the calendar that appears when you click the down arrow on an html5 date input?

<form>
    <label for="f-duedate">Due date</label>
        <input id="f-duedate" type="date" name="duedate"
               data-date-format="dd.mm.YYYY">
</form>

http://jsfiddle.net/no8a17eo/1/

I am aware of pseudo selectors that can be used to style the input field itself:

::-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 {
    display: none;
}
::-webkit-calendar-picker-indicator:hover {
   background:none;
}

Ideally, I would like this customization to be compatible with the latest version of Google Chrome.

Answer №1

Google's FAQ states that, currently, it is not possible to customize the style of the date picker interface: https://developers.google.com/web/updates/2012/08/Quick-FAQs-on-input-type-date-in-Google-Chrome

Is there a way to change how the date picker looks?

As per the information provided, modifying the appearance of the date picker is not supported at this time. While in WebKit, styling form controls using properties like -webkit-appearance CSS or ::-webkit-foo pseudo-class selector have been available, these options are not applicable for customizing the calendar popup in WebKit. This is because the calendar popup functions as a separate element from the document, similar to a popup menu, and there is no standard method to control the styling of its sub-elements.

You can either stick with Chrome’s default rendering of the date picker or consider using a custom library with an input type="text" field to avoid any potential conflicts.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Converting the OpenCV GetPerspectiveTransform Matrix to a CSS Matrix: A Step-by-Step Guide

In my Python Open-CV project, I am using a matrix obtained from the library: M = cv2.getPerspectiveTransform(source_points, points) However, this matrix is quite different from the CSS Transform Matrix. Even though they have similar shapes, it seems that ...

Challenges encountered when uploading a file using PHP

I am having trouble uploading a file to a server using PHP. The code I have is as follows: if( isset($_POST['Upload']) ) { //size condition if ( $_FILES['uploaded']['size'] > 350000) { $mesg = "Your file ...

Nested floating elements

Consider the layout below <div style='float: left;'>Outer Div </div> <div style='float: left;'> <div style='float: left;'>Inner Div </div> <div style='float: left;'>Inne ...

Button hover in Chrome causing problems with Leaflet map

Since yesterday, I have been experiencing issues with the buttons on my page. chrome : Version 61.0.3163.100 (Build officiel) (64 bits) I do not encounter any problems with Firefox. The problem arises when I select text on my overlay; the overlay beco ...

Could someone provide a detailed explanation on the functionality of multiple inline nth-child() in CSS?

In this scenario, there is an example provided: html>body>#wrapper>div>div>div:nth-child(1)>div:nth-child(1)>nav { I am curious about the functionality of this code. Could someone dissect each div, ">", and nth-child()? Your ins ...

After my data rows are filled, I add jQuery and CSS striping animations to enhance their appearance

Before any click, they have this appearance: Clicking on Sales in the business section reveals a drop-down select box. If I click on "Sales" and modify the text area, it will transition to grey. While the grey rows change accordingly, the black rows shoul ...

In search of a customized CSS design for drop-down lists and menus inspired by Apple's sleek aesthetic

I've been on the hunt for a CSS example that showcases Apple-style drop down lists and buttons. Despite my efforts to search through Google, I can't seem to find exactly what I'm looking for. I've tried various search phrases like "Appl ...

Interactive carousel featuring thumbnail navigation and central highlighting of images

I've been struggling with this issue for the majority of the day, so any assistance would be greatly appreciated. My goal is to find a carousel that includes both next and previous navigation buttons attached to the main image. Additionally, I am loo ...

What is the best method for closing the open portion of an accordion menu?

I'm experimenting with creating a collapsible accordion feature, but I'm facing a challenge in figuring out how to close the currently open accordion pane. The accordion functions smoothly when expanding sections, but I'm stuck on how to col ...

Using jQuery to animate the width of a container after it is fixed to the top of the page based on the position of the

Wow, I've been tinkering away for hours and can't seem to crack this code puzzle. Let's dive into some CSS: #wrapper { margin: 0 auto; padding: 0 20px; width: 960px; } #wrapper .block { width: 920px; height: 690px; } ...

Launch a new pop-up window with a designated keyboard language

My JavaScript code opens a new window using this syntax: window.open(URL); However, I've noticed that even when the browser's keyboard language is set to 'fa' during opening, the new window still defaults to 'en'. Is there ...

Securing HTML pages with ASP.NET MVC authentication

Within my MVC application, there are a few static (pure html) pages that require authentication to prevent unauthorized access. Is there a method to achieve this without transferring all the code to asp files and incorporating a controller, which would t ...

Guide on positioning an image in the upper right corner of another

Does anyone know how to use JavaScript to display one image in the top right corner of another image? I attempted to achieve this by using the appendChild() method to add the image element, but it doesn't seem to be working. function appendImage(ele ...

Images in responsive design not adjusting size properly

In my current web standards design course, I am delving into HTML/CSS and focusing on making our websites more responsive this month. As part of the process, I have successfully converted all pixel units to percentages and changed all font sizes from pixel ...

How can you iterate over the input elements that are currently visible within a form using Javascript?

Is there a way to clear the values of all visible input fields in a form using JavaScript? I'm currently struggling with setting text inputs to empty as they come out as undefined. Any suggestions on how to achieve this? ...

Selenium for Python is currently incompatible with Chrome version 93

Yesterday, my code ran successfully on Chrome v92.0.4515.107. However, after Chrome automatically updated to v93 today, I encountered an issue with the following part of the code: class CNVD(object): def __init__(self): self.options=webdriver. ...

Content editable div causing overflow issues in Internet Explorer

I am having trouble with a content editable div where the text is not wrapping properly. I attempted to use "overflow:scroll" but it only ends up cutting off the text horizontally. https://i.stack.imgur.com/WlMdY.jpg ...

Interactive chart embedded within a container

I have recently designed a card using Bootstrap and I would like to include a table with some data in it. However, I am facing an issue where the table data spills out of the card when I reduce the screen size for responsiveness testing. Could someone pl ...

Adjusting the size of the scrollbar within an iframe

[How do I adjust the size of an iframe scrollbar?](https://i.sstatic.net/zyr4y.png) I attempted to change the scrollbar width with the following style, but it did not work. /* Adjusting scrollbar width */ ::-webkit-scrollbar { width: 10px; } /* Track */ ...

CSS - Button with upwards pointing arrow, requiring it to point downwards when hovered over

Struggling with the following issue: I have a button with a downward-pointing arrow in its description. When I hover over the button (or any content within it), I want the arrow to point upwards. However, currently, the arrow only points up when I hover ...