[分享]css3搜索框内置啊按钮

CSS3搜索框内置按钮能够提升用户体验，让搜索操作更加便捷。下面我们来看看如何实现搜索框内置按钮。/ CSS样式代码 / .searchBox { : relative; / 使后面的按钮能够和输入框...

CSS3搜索框内置按钮能够提升用户体验，让搜索操作更加便捷。下面我们来看看如何实现搜索框内置按钮。

/* CSS样式代码 */
.searchBox {
  position: relative; /* 使后面的按钮能够和输入框在同一位置 */
  width: 300px;
  height: 30px;
}
.searchInput {
  width: 100%;
  height: 100%;
  padding-right: 45px; /* 留出右边框 */
  box-sizing: border-box; /* 让输入框宽度包括padding和border */
  outline: none; /* 隐藏输入框的默认轮廓线 */
  border: 1px solid #ccc;
  border-radius: 15px; /* 圆角 */
}
.searchButton {
  position: absolute; /* 按钮相对于.searchBox定位 */
  top: 50%;
  right: 5px;
  transform: translateY(-50%); /* 使按钮在垂直方向居中 */
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 20px;
  background-color: #ccc;
  cursor: pointer; /* 鼠标指针变为手型 */
}
.searchButton:hover {
  background-color: #888; /* 鼠标移动到按钮上时背景色变为灰色 */
} 

以上是CSS样式代码，接下来是HTML代码：

<div class="searchBox">
  <input type="text" class="searchInput" placeholder="请输入要搜索的内容">
  <button class="searchButton">搜</button>
</div> 

运行以上代码，即可实现搜索框内置按钮，并且在输入框中输入内容后，按下按钮即可进行搜索操作。