html 圆角搜索框 按钮事件
时间: 2023-07-11 07:25:54 浏览: 53
要实现一个带有圆角的搜索框和按钮事件,可以使用 HTML、CSS 和 JavaScript。下面是一个简单的实现步骤:
1. 在 HTML 中创建一个搜索框和一个按钮。
```
<div class="search-box">
<input type="text" placeholder="搜索...">
<button>搜索</button>
</div>
```
2. 使用 CSS 设置搜索框的样式,包括圆角和背景颜色等。
```
.search-box {
border-radius: 20px;
background-color: #eee;
overflow: hidden;
}
.search-box input {
border: none;
outline: none;
padding: 10px;
width: 80%;
float: left;
}
.search-box button {
border: none;
outline: none;
background-color: #333;
color: #fff;
padding: 10px 20px;
float: left;
cursor: pointer;
}
```
3. 使用 JavaScript 给按钮添加点击事件,获取搜索框中的文本并进行搜索。
```
var btn = document.querySelector(".search-box button");
var input = document.querySelector(".search-box input");
btn.addEventListener("click", function() {
var searchText = input.value;
// 进行搜索操作
});
```
通过以上步骤,我们可以实现一个带有圆角搜索框和按钮事件的效果。