Introduction
Form elements 樣式的點綴一直都是門學問，「太過」擾亂了使用者的習慣，「不及」又搔不到癢處。加上它們是被封裝過的 web component，想要確切地進行調整著實不易。除非 … 它有釋出對應的 property 或是 pseudo class～
就好比 <input /> 和 <textarea /> 的寬高，如果想要讓它的寬高可以自動依照內容來延展的話，就需要透過外列介入才能訴諸現實。筆者幾年前寫了一個 web component > <msc-stretch-textarea />，便是透過 grid 的奇技淫巧來達到自動延展高度的效果，有興趣的朋友不妨試試看。
CSS > field-sizing
field-sizing 這是一個 Chrome VER.123 率先支援的屬性，透過這個屬性的設置，便可以讓 form elements > input[type=text]、input[type=number]、input[type=email]、input[type=file]、select、select[multiple] 以及 textarea 的 size 依照內容物來自動調整。是的，有了這個屬性的支援之後，便可以輕輕鬆鬆使用原生支援的 auto stretch 功能了。
field-sizing 目前支援兩個屬性，分別是 fixed (default) 以及 content。
如範例所示，select 的寬度為 options 中最長內容的寬度，但是筆者透過 max-inline-size 以及 text-overflow 來制約它的最大寬度，但總有些美中不足之處，畢竟不是內容被制約總是無法第一眼就知道它所代表的意涵， 所以筆者搭配 at-support 來進行補強，若當前瀏覽器有支援 field-sizing 這個屬性的話，就取消 max-inline-size 並讓 field-sizing 的內容設置為 content，如此一來 select 的寬度就會依照當前所選擇的 option 一樣，不再是最長內容的 option 寬度了～
Conclusion
以上便是 field-sizing 所展現出來的效果與魅力，若有 auto stretch form element 需求的朋友千萬不要錯過了這個德政，倘若擔心瀏覽器支援度問題，便和筆者一樣把 at-support 搬出來用，輕輕鬆鬆完成 progress enhancement～
希望以上介紹對大家有所助益，感謝大家的閱讀！ #CSS