Stretching Form elements !!

Paul Li
Apr 8, 2024
Stretching From elements !!

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]selectselect[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

Reference

--

--

Paul Li

Paul is the lead programmer of the AMP project at Yahoo Taiwan and is always eager for modern web technologies. He is also focusing on UX for vivid user flow.