IT 累计浏览 2 CSS field-sizing属性简介 CSS field-sizing 属性是一项新的表单元素样式特性，专用于 `` 和 `` 等输入控件。该特性旨在解决传统表单控件尺寸固定的问题：在过去，若要使输入框的宽度随输入内容自动伸缩，必须借助 JavaScript 动态计算和调整。现在，通过简单的 CSS 声明即可实现这一效果。其核心在于 `field-sizing` 属性，它有两个值：`content`（默认值为 `fixed`，即尺寸固定）。设置 `field-sizing: content` 后，输入框的宽度会根据实际输入文本的长度自动增长或收缩。 需要注意的是，当应用 `content` 值时，HTML 中原本控制尺寸的 `size` 属性（对 `<input>`）以及 `rows` 和 `cols` 属性（对 `<textarea>`）将失效。此属性同样可用于 `<select>` 元素。在实际布局中，建议结合 `min-width` 和 `max-width` 使用，以避免输入内容过多时破坏页面布局。目前，该特性已获得 Safari 和 Chrome（123+）等主流浏览器的支持。</p> </div> </article> <nav class="br-pagination" aria-label="pagination"> <ul class="pagination pagination-sm"><li class="page-item active" aria-current="page"><span class="page-link">1</span></li></ul> </nav> </section> <aside class="br-stack br-sidebar" aria-label="IT sidebar"> <section class="br-side-card"> <h2>近 3 天十大热文</h2> <ol class="br-rank-list"> <li><span class="br-rank">1</span><a href="https://blogread.cn/it/article/8279?f=hot3">Go Reflect 性能<small>近 3 天 115 浏览</small></a></li> <li><span class="br-rank">2</span><a href="https://blogread.cn/it/article/7155?f=hot3">让安卓手机通过代理翻墙的方法<small>近 3 天 38 浏览</small></a></li> <li><span class="br-rank">3</span><a href="https://blogread.cn/it/article/8382?f=hot3">让 AI 把我的 PHP 博客重写成 Go<small>近 3 天 30 浏览</small></a></li> <li><span class="br-rank">4</span><a href="https://blogread.cn/it/article/8000?f=hot3">探索react native首屏渲染最佳实践<small>近 3 天 28 浏览</small></a></li> <li><span class="br-rank">5</span><a href="https://blogread.cn/it/article/2403?f=hot3">挑战邮箱搜索<small>近 3 天 27 浏览</small></a></li> <li><span class="br-rank">6</span><a href="https://blogread.cn/it/article/8380?f=hot3">CSS 中的标点悬挂及其现状<small>近 3 天 27 浏览</small></a></li> <li><span class="br-rank">7</span><a href="https://blogread.cn/it/article/3564?f=hot3">Hive源码解析-之-语法解析器<small>近 3 天 26 浏览</small></a></li> <li><span class="br-rank">8</span><a href="https://blogread.cn/it/article/8379?f=hot3">Postmortem: 关于 xzutil <small>近 3 天 25 浏览</small></a></li> <li><span class="br-rank">9</span><a href="https://blogread.cn/it/article/517?f=hot3">整理了一份招PHP高级工程师的面试题<small>近 3 天 25 浏览</small></a></li> <li><span class="br-rank">10</span><a href="https://blogread.cn/it/article/6227?f=hot3">AWK 简明教程<small>近 3 天 22 浏览</small></a></li> </ol> </section> <section class="br-side-card" style="padding:12px;text-align:center;"> <ins class="adsbygoogle" style="display:inline-block;width:250px;height:250px" data-ad-client="ca-pub-2206192680127944" data-ad-slot="5430998082"></ins> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </section> </aside> </main> <footer class="br-shell" style="padding-top:12px;padding-bottom:20px;color:var(--br-muted);font-size:13px;"> <div style="text-align:center;line-height:1.9;"> © 2009 - 2026 by blogread.cn · 微博：<a href="https://weibo.com/blogread" target="_blank" style="color:var(--br-accent)">@IT技术博客大学习</a> · <span class="news-footer-trust-links"><a href="/about.html">关于</a> · <a href="/contact.html">联系</a> · <a href="/privacy.html">隐私</a> · <a href="/disclaimer.html">内容来源声明</a></span> · <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备15002552号-1</a> </div> </footer> <!-- Bootstrap 5 bundle (含 Popper); 不再依赖 jQuery。 --> <script src="/plugins/bootstrap-5.3.8/js/bootstrap.bundle.min.js"></script> <script src="/assets/frontend-modern/reader-actions.js"></script> </body> </html>
