css3搜索框素材

CSS3搜索框是一种非常流行的网页设计元素，它可以为网站带来更加现代化的外观和交互效果。而且，通过CSS3搜索框，我们可以轻松地实现各种各样的样式和效果。下面我们来看几个常见的CSS3搜索框素材。

    
/*1.基本的输入框样式*/
input[type="search"] {
  width: 100%;
  height: 40px;
  padding: 10px;
  border-radius: 20px;
  border: 1px solid #ccc;
}

/*2.带有渐变效果的搜索框*/
.search {
  position: relative;
  width: 400px;
  margin: 0 auto;
}

.search input[type="text"] {
  width: 280px;
  padding: 10px;
  border: 2px solid #ccc;
  border-right: none;
  border-radius: 5px 0 0 5px;
  font-size: 16px;
  color: #666;
}

.search input[type="submit"] {
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 44px;
  background: #26ae90;
  border: none;
  border-radius: 0 5px 5px 0;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

/*3.折叠式搜索框*/
.search-Box {
  position: relative;
  width: 300px;
  margin: 20px auto;
}

.search-Box input[type="search"] {
  width: 100%;
  height: 40px;
  padding: 10px 50px 10px 10px;
  border-radius: 20px;
  border: 1px solid #ccc;
  outline: none;
  transition: all 0.3s ease-in-out;
}

.search-Box button[type="submit"] {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.search-Box button[type="submit"]::before {
  content: "";
  position: absolute;
  top: 12px;
  right: 16px;
  width: 24px;
  height: 24px;
  background: url(search.png) no-repeat;
}

.search-Box.open input[type="search"] {
  width: 200px;
  padding: 10px;
}

.search-Box.open button[type="submit"] {
  background: #26ae90;
}
      

这些搜索框素材不仅外观美观，而且非常易于使用和定制。我们可以通过修改样式表中的属性，进一步调整这些搜索框的样式和效果，实现更加丰富多彩的网页设计。