[分享]css3搜索框怎么用

发布于 2024-11-11 15:41:03

CSS3搜索框是一种较为常见的搜索框样式，使用它可以让你的网页更加美观、简洁，同时也使得搜索框的使用更加便捷。下面我们来看看如何使用CSS3搜索框。 CSS3搜索框 /搜索框整体样式/ .search...

CSS3搜索框是一种较为常见的搜索框样式，使用它可以让你的网页更加美观、简洁，同时也使得搜索框的使用更加便捷。下面我们来看看如何使用CSS3搜索框。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3搜索框</title>
<style>
/*搜索框整体样式*/
.search-box {
  position: relative;
}

/*输入框样式*/
.search-input {
  border: none;
  padding: 10px 40px;
  width: 100%;
  font-size: 20px;
  background: #fff;
  box-sizing: border-box;
}

/*搜索按钮样式*/
.search-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background: #007eff;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}

/*放大镜样式*/
.search-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  background: url("search-icon.png") no-repeat center center;
  background-size: cover;
}
</style>
</head>
<body>

<div class="search-box">
  <input type="text" class="search-input" placeholder="请输入搜索内容">
  <button type="submit" class="search-btn"><i class="search-icon"></i></button>
</div>

</body>
</html>

在这个例子中，我们将搜索框分为三个部分：搜索框整体、输入框和搜索按钮。整体的样式使用了相对定位，输入框样式中去掉了边框，增加了左右的内边距，使其更加美观。搜索按钮样式中使用了绝对定位，让按钮位于输入框右侧，同时增加了样式，让其更加美观。放大镜图标使用了CSS3中的background属性，使用了background-size样式来使其适应大小。

在使用这个例子时，可以将图片替换为你的网站所需要的图片，并在CSS样式中修改对应的样式即可，使其更贴合你的网站。同时，你也可以根据需要增加其他样式，让搜索框更加独特。

css 教程