用htnl,JavaScript写一个好看的搜索框和搜索按钮
时间: 2023-03-27 08:04:29 浏览: 69
好的,我可以回答这个问题。要创建一个好看的搜索框和搜索按钮,您可以使用 HTML 和 CSS 来设计它们的外观,使用 JavaScript 来实现搜索功能。以下是一个简单的示例代码:
HTML 代码:
```
<div class="search-container">
<input type="text" placeholder="搜索...">
<button type="submit">搜索</button>
</div>
```
CSS 代码:
```
.search-container {
display: flex;
align-items: center;
justify-content: center;
}
input[type="text"] {
padding: 10px;
border: none;
border-radius: 5px 5px;
width: 70%;
}
button[type="submit"] {
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px 5px ;
padding: 10px;
width: 30%;
cursor: pointer;
}
button[type="submit"]:hover {
background-color: #45a049;
}
```
JavaScript 代码:
```
const searchBtn = document.querySelector('button[type="submit"]');
const searchInput = document.querySelector('input[type="text"]');
searchBtn.addEventListener('click', () => {
const searchTerm = searchInput.value;
// 在这里添加搜索功能的代码
});
```
当用户点击搜索按钮时,JavaScript 代码将获取搜索框中的文本,并执行搜索功能。您可以在这里添加您自己的搜索逻辑。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)