css 长度可变搜索框 |css业务口堆叠

.search-box {
width: 200px; /* 搜索框最小宽度 */
padding: 8px;
border: 1px solid #aaa;
border-radius: 4px;
}
.search-box input[type="text"] {
width: 100%;
border: none;
outline: none;
}

在这段CSS代码中，大家首先定义了一个名为search-box的class，给该class设置了一个最小宽度、内边距、边框和圆角。接着大家又定义了一个名为search-box input[type=”text”]的选择器，用来设置搜索框内输入文本的样式。由于大家需要实现长度可变的搜索框，大家将文本框的宽度设置为100%，这样当用户输入文本时，文本框的宽度就会随之变化。

在HTML中，大家只需要使用一个包含input元素的div容器，并且给该容器添加大家上面定义的search-box class即可：

<div class="search-box">
<input type="text" placeholder="搜索">
</div>

这里大家使用了input元素的placeholder属性，它会在文本框中显示一个提示信息，帮助用户更好地理解搜索框的作用。

现在，大家的长度可变搜索框就已经实现了。如果你需要更改搜索框的样式，只需要更改CSS代码即可。