Chrome 83 Form Element Styles

Chrome 83 version has made some tweaks to the visual effects of form elements. All gradients are gone (especially extra glossy effect of the element). Overall consistency is improved, especially between the input box and the text field. While I'm not too cold to the new style, I've heard that the change incorporates a lot of accessibility research, so it's hard to complain about it - and you can always change it.

Hakim posted a good comparison tweet:

Chrome's new default form style has been released? pic.twitter.com/Pr6qi1LpPn

— Hakim El Hattab (@hakimel) May 26, 2020

This is not accompanied by a new standardized approach to using CSS to change the appearance of form elements, although browser vendors are very clear about this and seem to be getting closer to that goal. I believe this is a step in this direction.

I also noticed a new one<input type="time"> element. The old version looks like this and does not provide any UI controls:

Now we get this improved version with the controls:

Reddit points out that it uses the same pseudo-element as the date picker, so if you want to remove it, you can scope it to these types of inputs (or not limited) and then remove it.

 input[type="time"]::-webkit-calendar-picker-indicator {
  display: none;
}

I think this is an improvement (I like elements with UI controls), but this does continue to highlight the need to be able to style these elements, especially if the goal is to get people to actually use them instead of (badly) rebuilding them.

The above is the detailed content of Chrome 83 Form Element Styles. For more information, please follow other related articles on the PHP Chinese website!