一个新的css属性：field-sizing

CSS
CSS
发布日期:   2024-09-20
更新日期:   2024-09-20
文章字数:   233
阅读时长:   1 分
阅读次数:  

field-sizing 控制表单尺寸自适应的CSS

  • 语法
    • fixed，输入框、文本区域和下拉选择，无论内容如何，​​它们宽高都是固定
    • content，输入框、文本区域和下拉选择元素的宽高会根据内容的大小而变化
  • 需要 Chrome 123版本以上才能查看效果
    field-sizing: fixed | content

示例代码

<div style="min-height:300px; width: 300px; border:2px solid #ccc;padding: 5px;">
  <input style="border:1px solid #ccc; min-width: 100px;max-width: 300px; field-sizing: content" />
  <textarea style="field-sizing: content; width: 200px;"></textarea>
  <div>
    <select style="field-sizing: content; display:block;">
      <option value="3">测试</option>
      <option value="2">测试数据</option>
      <option value="1">测试一条很长很长很长很长很长的数据</option>
    </select>
  </div>
</div>
  • 当前环境不可预览效果，可复制代码到html预览查看
CSS
赏
  目录