CSS搜索框的制作方法

在网页设计中，搜索框是一个极为常见且重要的元素，它能够帮助用户快速定位所需信息。而通过CSS，我们可以轻松打造出美观实用的搜索框。

我们要创建HTML结构。通常，搜索框包含一个输入框和一个按钮。基本的HTML代码如下：

<div class="search-box">
    <input type="text" placeholder="请输入关键词">
    <button>搜索</button>
</div>

这里，我们将输入框和按钮放在一个class为“search-box”的div容器中。

接下来就是使用CSS进行样式设计。先设置搜索框容器的样式，比如宽度、高度和位置等。

.search-box {
    width: 300px;
    height: 40px;
    margin: 50px auto;
    position: relative;
}

上述代码将搜索框宽度设为300px，高度40px，并使其在页面中水平居中显示，同时设置为相对定位，方便后续对内部元素进行绝对定位。

然后设置输入框的样式。输入框是搜索框的核心部分，要保证用户输入体验良好且外观美观。

.search-box input {
    width: 230px;
    height: 100%;
    border: 1px solid #ccc;
    border-radius: 5px 0 0 5px;
    padding: 0 10px;
    font-size: 16px;
}

这里为输入框设置了宽度为230px，高度与容器一致，边框为1px灰色实线，同时设置了左半边的边框圆角，内边距为左右各10px，字体大小为16px。

对于搜索按钮，也要进行精心设计。

.search-box button {
    width: 70px;
    height: 100%;
    border: none;
    border-radius: 0 5px 5px 0;
    background-color: #007BFF;
    color: white;
    font-size: 16px;
    cursor: pointer;
}

按钮宽度设为70px，高度同样与容器相同，无边框，设置右半边的边框圆角，背景色为蓝色，文本颜色为白色，字体大小16px，并添加了鼠标指针悬停效果。

还可以通过CSS的:hover和:focus等伪类为搜索框和按钮添加交互效果，比如当鼠标悬停在按钮上时改变背景色，当输入框获得焦点时改变边框颜色等，进一步提升用户体验。

通过以上步骤，一个简单又实用的CSS搜索框就制作完成了。掌握这些基本方法，就能根据项目需求，灵活设计出风格各异的搜索框，为网页增添更多吸引力和功能性。