0

This is the (new) native datepicker found in Chrome/Edge on desktops.

Edge Datepicker

As far as I can tell it isn't respecting my OS/browser color scheme (dark/light) and it's always rendering as white. Is there way to overwrite this behaviour in CSS?

Or is there a way to provide custom styles, e.g change the highlight color.

Thanks for any help.

P.s: I tried following the instructions given in Microsoft's blog post, but didn't get it to work (forced-color-adjust)

Live Example (run in Chrome/Edge)

<br />

<label>force-color-adjust: auto <input style="forced-color-adjust: auto;" type="date"></label>

<br />

<label>force-color-adjust: none <input style="forced-color-adjust: none;" type="date"></label>
Dai
  • 141,631
  • 28
  • 261
  • 374
Dogoku
  • 4,585
  • 3
  • 24
  • 34
  • Have you looked at the list of CSS `-webkit-`-prefixed pseudo-element names for these input elements? e.g. https://developer.mozilla.org/en-US/docs/Web/CSS/WebKit_Extensions – Dai Oct 02 '20 at 08:40
  • `forced-color-adjust` is still a draft property, and it only allows you to opt-out of UA color schemes, not opt-in to them. – Dai Oct 02 '20 at 08:43
  • @Dai Thx, had a look now. Nothing there as far as I can tell – Dogoku Oct 02 '20 at 08:44
  • @Dai yeah seems like i misunderstood its use. I also found a related article that goes in-depth on this feature: https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/ – Dogoku Oct 02 '20 at 08:48
  • @Deepak-MSFT unfortunately your answer doesn't solve my problem as that's related to other accessibility settings. what i need is to style the dropdown (not the input) based on `prefers-color-scheme` which follows the OS theme (light/dark). – Dogoku Oct 14 '20 at 20:02
  • From your comment, I understand that you want to apply a style to the calendar part in the date picker and not to the input where the selected date gets displayed. I try to search but did not get any ways to apply the style to the calendar part. So it looks like at present, we can only apply styles to the input part of the date picker. – Deepak-MSFT Oct 16 '20 at 07:59

1 Answers1

0

If you want to apply some styles to the date picker then you can refer to this answer.

I also try to check the blog-post and your sample code.

I see the date picker shown in the blog and noticed that they are talking about Windows High Contrast.

enter image description here

That means to get a similar output shown in that blog, you need to turn on the High Contrast mode on your Windows 10 OS.

You can refer to the steps below to turn on/off High Contrast mode.

  1. Click the right mouse button on the desktop screen.

  2. Click on personalise option.

  3. Select the Background tab from the left sidebar and click on High Contrast settings option.

  4. Toggle the button to turn on High contrast mode.

enter image description here

Now, if you see the web page in the MS Edge (Chromium) browser then you can see the same result as shown in the blog.

enter image description here

I suggest you also try to check the code samples mentioned in this link. It can be helpful to apply CSS to elements, especially for contrast mode.

Deepak-MSFT
  • 10,379
  • 1
  • 12
  • 19