CSS 新屬性Field-sizing，可以讓input 、 textarea和select自適應其內容

介紹field-sizing

field-sizing 是一個新的 CSS 屬性，可以讓input 、 textarea和select自動縮放到其內容的大小。

• fixed ，這是輸入、文字區域和選擇的當前行為，無論內容如何，它們都具有固定大小。
• content ，使表單元素縮放到內容的大小

當您將其應用於input或select時，它將縮放到內容的寬度。當您將其應用於textarea，它將縮放到內容的高度。

範例

<input type="text" placeholder="input" value="this sizes to its content">

<style>input {
  field-sizing: content;
}
</style>

<textarea>
Here is a
Multiline
Textarea
</textarea>


<style>
 textarea {
  field-sizing: content;
  width: 200px;
}
</style>

注意事項

• 它是CSS 基本使用者介面模組第 4 級 CSS Basic User Interface Module Level 4 的一部分，仍處於編輯器草稿狀態（意味著事情可能並且將會發生變化），目前它是 Chromium 獨有的功能。不過，我預計它會在今年某個時候登陸其他瀏覽器，Safari 已經發出了積極的信號，Firefox 可能也會效仿。
• 除了缺乏瀏覽器支援之外，您還需要確保您的input、select或textarea有一些邊界。如果你不這樣做，它只會不斷增長。您可以透過在元素上設定max-width或max-height來做到這一點
• 同樣，如果您不希望它縮小到空格或點的寬度，請為您的輸入和選擇添加min-width 。

以上是CSS 新屬性Field-sizing，可以讓input 、 textarea和select自適應其內容的詳細內容。更多資訊請關注PHP中文網其他相關文章！