[分享]css3收缩搜索框

CSS3提供了很多强大的功能，其中之一就是可以收缩搜索框。通过利用CSS3的伸缩特性，我们可以非常方便地创建一个搜索框，让其在不同大小的屏幕上都具有非常好的可用性。搜索框 { display: fle...

CSS3提供了很多强大的功能，其中之一就是可以收缩搜索框。通过利用CSS3的伸缩特性，我们可以非常方便地创建一个搜索框，让其在不同大小的屏幕上都具有非常好的可用性。

搜索框 {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 10px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

搜索框 .搜索输入 {
    flex: 1;
    border: none;
    outline: none;
    font-size: 18px;
}

@media (max-width: 768px) {
    搜索框 {
        flex-wrap: wrap;
        justify-content: center;
        max-width: 100%;
    }

    搜索框 .搜索输入 {
        flex-basis: 100%;
        margin-bottom: 10px;
    }
} 

我们首先创建了一个div，类名为“搜索框”，并将其display设置为flex以启用伸缩特性。此外，我们还设置了一个最大宽度为400像素，并将其均匀居中。

然后，我们创建了一个类名为“搜索输入”的input元素，它将占用搜索框的剩余空间。我们还添加了一些样式来美化搜索框，例如圆角边框，阴影和纯白背景。

下一步是将媒体查询添加到我们的代码中，这将检测屏幕宽度是否小于768像素。如果是，我们将将flex-wrap设置为wrap以使搜索框在有限屏幕空间中完美适应，并将其justify-content设置为center以使其居中。我们还将搜索输入的flex-basis设置为100％以使其充满容器，并在底部添加了一个10像素的margin以增加一些间距。

这样，我们就可以创建一个简单而美观的收缩式搜索框，使其在不同大小的屏幕上都非常方便地使用了。