css3输入搜索框模板

CSS3输入搜索框模板是一种非常实用的设计方式，通过使用CSS3的特性，实现了更加美观、交互性更强的搜索框样式。下面我们来分享一下如何实现这样一个输入搜索框模板。

html:

  搜索


css:
.search-Box{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  height:50px;
}

.search-Box input[type="search"]{
  width:80%;
  height:100%;
  border:none;
  border-radius:25px;
  outline:none;
  padding-left:20px;
  font-size:16px;
  background:rgba(255,255,.7);
  transition:all .3s ease;
}

.search-Box input[type="search"]:focus{
  width:85%;
}

.search-Box .search-btn{
  position:absolute;
  right:0;
  width:15%;
  height:100%;
  font-size:16px;
  border:none;
  border-radius:25px;
  background:lightgray;
  cursor:pointer;
  transition:all .3s ease;
}

.search-Box .search-btn:hover{
  background:gray;
}

以上代码实现了一个简单的输入搜索框模板，我们可以按照实际需要进行修改和美化。通过使用CSS3的强大特性，我们可以实现更加丰富、绚丽的搜索框样式。