介绍
CSS搜索框广泛用于网站和应用程序中，以让用户查找特定信息。在这篇文章中，我们将讨论如何使用CSS编写一个美观且有用的搜索框。我们将覆盖搜索框及其背景、图标、文本框样式、鼠标悬停效果和焦点效果。
HTML结构
为了创建搜索框，我们需要一个包含文本输入框和搜索按钮的表单。以下是我们将使用的HTML代码：
<form action="#" method="get">
<input type="text" placeholder="搜索...">
<button type="submit">搜索</button>
</form>
输入框样式
现在我们需要为输入框样式添加一些CSS。因为HTML5中的输入类型为“文本”，所以下面的样式将适用于所有主要浏览器。
input[type="text"] {
padding: 10px;
border: none;
border-radius: 3px;
font-size: 16px;
box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
如上所示，我们已添加样式来设置文本框的填充、边框、边框半径、字体大小和盒子阴影。检查效果如下：
搜索按钮样式
下一步是为按钮生成样式。我们将使用与文本框相似的盒子阴影、字体样式和背景颜色。我们还将使用:hover选择器添加鼠标悬停效果。
button[type="submit"] {
padding: 10px 20px;
border: none;
border-radius: 3px;
font-size: 16px;
background: #51a7e8;
color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
button[type="submit"]:hover {
background: #2e8adc;
}
检查效果：
完整的CSS
form {
display: inline-block;
position: relative;
}
input[type="text"] {
padding: 10px;
border: none;
border-radius: 3px;
font-size: 16px;
box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
button[type="submit"] {
padding: 10px 20px;
border: none;
border-radius: 3px;
font-size: 16px;
background: #51a7e8;
color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
button[type="submit"]:hover {
background: #2e8adc;
}
完整示例
为了展示如何创建美丽的搜索框，我们将使用一个完整的HTML和CSS示例。这个示例包括一个简单的搜索图标和一个动画提示文本框的焦点状态。
<!DOCTYPE html>
<html>
<head>
<title>CSS搜索框</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form action="#" method="get">
<span class="search-icon">
<i class="fa fa-search" aria-hidden="true"></i>
</span>
<input type="text" placeholder="搜索...">
<span class="focus-border"></span>
<button type="submit">搜索</button>
</form>
</body>
</html>
@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
form {
display: inline-block;
position: relative;
}
input[type="text"] {
padding: 10px;
border: none;
border-radius: 3px;
font-size: 16px;
box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
button[type="submit"] {
padding: 10px 20px;
border: none;
border-radius: 3px;
font-size: 16px;
background: #51a7e8;
color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
button[type="submit"]:hover {
background: #2e8adc;
}
.search-icon {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
left: 15px;
top: 10px;
height: 36px;
width: 36px;
}
.search-icon i {
color: #bbb;
}
.focus-border {
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 3px;
background-color: #51a7e8;
transition: all 0.2s ease-out;
}
input:focus ~ .focus-border {
width: 100%;
}
查看上述示例的效果：
结论
通过应用一些基本的CSS样式和一些小技巧，我们可以轻松地创建一个美丽而实用的搜索框。使用这个例子中的技巧，你可以根据你的网站或应用程序的需要根据自己的喜好和风格设计自己的搜索框。