是否可以仅使用 CSS 动态设置输入元素的宽度？

【问题标题】：Is it possible to set the width of an input element dynamically using only CSS?是否可以仅使用 CSS 动态设置输入元素的宽度？
【发布时间】：2014-02-06 00:29:49
【问题描述】：

JSFiddle

HTML：

<div>
    abc
    <input />
</div>

CSS：

div {
    width:80%;
    background-color:yellow;
}
input {
    width:90%;
}

我想知道是否有纯 CSS 方式来修改输入元素的宽度，调整到剩余的可用空间。

谢谢。

【问题讨论】：

"jsfiddle.org的链接必须有代码"
我从他部分给出的链接中添加了代码和 JSFiddle。

标签： html css input width

【解决方案1】：

作为纯 CSS 解决方案，您可以用容器 <div> 将 <input> 包裹起来，并用 overflow-x: hidden; 隐藏框的水平溢出。

然后使用<label> 元素将文本浮动到左侧：

HTML：

<label>abc</label>
<div class="wrapper">
    <input />
</div>

CSS：

.wrapper { overflow-x: hidden; }
label { float: left; }
input { width:100%; box-sizing: border-box; }

JSFiddle Demo

【讨论】：