帮我用html和css写一个搜索框
时间: 2024-05-29 11:10:02 浏览: 7
<!DOCTYPE html>
<html>
<head>
<title>搜索框</title>
<style>
.search-box {
width: 300px;
height: 40px;
position: relative;
margin: 50px auto;
}
.search-box input[type="text"] {
width: 100%;
height: 100%;
padding: 10px;
border: none;
border-radius: 20px;
font-size: 16px;
outline: none;
box-sizing: border-box;
}
.search-box button {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50px;
border: none;
background-color: #333;
color: #fff;
border-radius: 0 20px 20px 0;
cursor: pointer;
font-size: 16px;
}
.search-box button:hover {
background-color: #555;
}
</style>
</head>
<body>
<div class="search-box">
<input type="text" placeholder="请输入搜索内容...">
<button type="submit">搜索</button>
</div>
</body>
</html>
相关推荐
![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)