The changes of HTML tag input in iOS 15 are shocking

[[440196]]

A long time ago, probably a few years ago, I did some simple organization and understanding of the form elements in HTML. Several years have passed in a daze, and I have never paid attention to whether these default HTML tag elements have changed after the continuous upgrades of browsers and systems.

However, a few days ago, I accidentally discovered that the default UI styles of some input tags have changed. So I suddenly became interested in seeing if other types of UI in input have also changed.

Browser comparison chart

As the saying goes, you don’t know until you see it. Once you see it, well, it’s a surprise. There are still some changes, especially some changes in details. The screenshot effect in macOS is shown above. Let’s take a look at a change in Safari in iPadOS15.

Effects in iPadOS15

The main detail changes are:

• The default color of the button has changed (text, border, background);
• The color UI has changed from a color block to a color wheel;
• The style of range has also changed;
• The search box has a magnifying glass icon. If I remember correctly, it didn't have one before;

There are also some changes in iOS15, and these changes are similar to iPadOS.

Effects in iOS 15

The above mentioned are only the changes seen on the surface. There are also changes in interaction and some details. Therefore, the changes mentioned above do not include the keyboard style and pop-up style of the keyboard triggered after activation. You can experience it yourself for details.

Input type default style QR code

Of course, I also know that many people, or most people, now directly use various component libraries, and do not care about these native controls, or even various simulations. There is nothing wrong with this, it's just that they want more powerful customization and consistent performance in various browsers. That's all, everyone understands.

Customization reflects the technical value and meets more business needs. Perhaps it should be to meet more business needs. The consistency of browser performance should be the most critical fatal flaw. Otherwise, there will be various bugs and business needs cannot be met. Just thinking about it is painful...

However, I compared the effects of the color type in iPad14 and iOS15, and I felt that the changes in input controls are huge in iPadOS15 and iOS15.

Color panel in iPadOS14

Color panel in iOS 15

After the video is recorded and converted to GIF, the image quality is a bit poor, but it is not critical. If you are interested in experiencing it, you can directly scan the QR code below to experience it. In fact, it is just a line of code.

QR code

 <input type= "color" value= "#f32600" >

It is unrealistic to expect browsers to have a unified UI, so just feel the waste of such a UI.

This article is reprinted from the WeChat public account "Zhiyu Zhile", which can be followed through the following QR code. To reprint this article, please contact Zhiyu Zhile's public account.