HTML 標簽 Input 在 iOS 15 的改變，驚呆了
早之前，應該有幾年了，對 HTML 中的表單元素做過一些簡單整理和了解，恍恍惚惚不知不覺過了好幾年了，一直未曾在意瀏覽器在不斷升級、系統在不斷升級之后，這些默認的 HTML 標簽元素是否有改變。
然而就在幾天前無意間發現 input 標簽的一些 type 類型默認 UI 樣式發生了一些改變。于是突然又來了興趣想看看 input 中其他類型的 UI 是否也發生了改變。
各瀏覽器對比圖
所謂的不看不知道，一看，嗯，意外了一下。改變還是有的，尤其是一些細節上的變化。上圖看到的在 macOS 中的截圖效果，再來看一下 iPadOS15 中 Safari 的一個變化。
iPadOS15 中的效果
主要的細節變化是：
- 按鈕的默認顏色變了(文字、邊框、背景);
- color 的 UI 變了，從一個色塊變成了色環;
- range 的樣式也變了;
- search 搜索框多了一個放大鏡的 icon，如果我沒記錯的話，之前是沒有的;
同樣的在 iOS15 中也是有著一些變化，而這些變化跟 iPadOS 是相類似的。
iOS 15 中的效果
上面提到的這些僅僅只是從表面上看到的變化，在交互以及一些細節上也有了變化，所以上述所提到的變化內容，不包含激活后觸發鍵盤的鍵盤樣式以及彈層樣式，具體的大家可以自行體驗一下。
input 類型默認樣式的二維碼
當然，我也知道其實很多人，應該說是大部分人現在都是直接使用各種組件庫，而并不會在意這些原生的控件，甚至可能是各種模擬來實現。這其實并沒毛病，只不過是想要更強大的定制化，以及各個瀏覽器中的表現一致。僅此而已，其實大家都懂。
定制化體現的是技術價值以及滿足更多的業務需求，或許應該是為了滿足更多的業務需求。瀏覽器的表現一致性應該才是最關鍵的致命傷，要不然會收到各種 bug，無法滿足業務需求，想想就痛苦……
然而我對比了一下 iPad14 和 iOS15 中 color 這個 type 類型的效果，深感在 iPadOS15 和 iOS15 中，input 控件的變化是很大的。
iPadOS14 中的 color 面板
iOS15 中的 color 面板
視頻錄制后轉 gif，圖片質量有點差，不過不是關鍵，有興趣體驗的可以直接掃下面這個二維碼來感受一下。其實也就是一句代碼。
二維碼
- <input type="color" value="#f32600">
期望瀏覽器的 UI 統一是不現實了，就感受感受這樣的 UI 被浪費的心情吧。
本文轉載自微信公眾號「志語職樂」，可以通過以下二維碼關注。轉載本文請聯系志語職樂公眾號。
