[[440196]]

早之前，應該有幾年了，對 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 被浪費的心情吧。

本文轉載自微信公眾號「志語職樂」，可以通過以下二維碼關注。轉載本文請聯系志語職樂公眾號。