There have been some aesthetic changes to what form elements look like as of Chrome 83. Anything with gradient colorization is gone (notably the extra-shiny <meter> stuff). The consistency across the board is nice, particularly between inputs and textareas. Not a big fan of the new <select> styling, but I hear a lot of accessibility research went into this, so it’s hard to complain there — plus you can always change it.
Hakim has a nice comparison tweet:
Chrome’s new default form styles are out 👀 pic.twitter.com/Pr6qi1LpPn
— Hakim El Hattab (@hakimel) May 26, 2020
This is not accompanied by new standardized ways to change the look of form elements with CSS, although browsers are well aware of that and seem to draw nearer and nearer all the time. I believe this was a step along that path.
I also see there is a new <input type="time"> as well. The old version looked like this and offered no UI controls:
Now we get this beast with controls:
Reddit notes that it uses the same pseudo element that date pickers use, so if you want it gone, you can scope it to these types of inputs (or not) and remove it.
input[type="time"]::-webkit-calendar-picker-indicator {
display: none;
}I’d call it an improvement (I like UI controls for things), but it does continue to highlight the need to be able to style these things, particularly if the goal is to have people actually use them and not (poorly) rebuild them.
When focusing an element, now it shows a thick black outline which looks ugly.
I don’t like it either. The old orange colour was ok because it should out (and people were used to it).
I thought this was an issue with my styles originally…
I guess as an opinion that is fine. I personally like it, though I totally get it that some may not.
I think also from an accessibility point of view, it is a decent starting point; and researched by Microsoft who contributed it, I believe.
That said, I can also find it surprising and unexpected if your site has a different theme. For example, while typing this comment on css-tricks.com with Chrome the use of blue for the checkbox for the comment subscription options completely clashes with the dark/orange based theme, and per my other comment here there doesn’t appear to be a way in CSS to change the actual native control itself (without doing more substitution trickery, which may not be easy for larger sites)
Other than the checkbox/radio buttons, I think the focus style can all be changed in CSS, and for some sites I will be keeping it as is, I think.
Neat article. I’m not a big fan of new select box too.
Quick note: You can visualize all the html elements here.
https://devansvd.github.io/html-elements/
Thanks for the article. I think the generally accessibility improvements are great. I think it started from Microsoft’s contributions? In edge the radio/checkbox styles are black, but blue in Chrome which sadly can clash with some sites themes, and unless I’m mistaken is not easy to change the native style? While I get you can hide the native checkbox or radio and use an icon or whatever with the checked selector that can be hard to retrofit into large apps that are form heavy, quickly.
Off Topic: This comparison slider block surely is helpful if you want to compare really similar things, e.g. images with different quality settings. In this case it makes the comparison quite difficult:
The slider is not easy to see with the white background, you can’t easily relate which form elements are from which Chrome version, and you never see both versions at once.
A simple image showing both versions side by side would have done a way better job. Sorry, if that sounds harsh or unfriendly. I understand you just wanted to play with it.
Love the swipey comparison block! Finally a reason to leave the comfort of my RSS reader
Why a default calendar? Why?
Hi, how can we style the new lower part of input range component now ?
Thanks