请写一个搜索栏左边可以选择使用搜狗百度binggoogle其中一种搜索引擎进行搜索中间就是搜索内容区域右边就是搜索按钮要求都要在同一个框内并且是同一排颜色是白色的请写出代码另外边框为圆角20px。要求搜索引擎的功能要能使用选择哪个就用哪个引擎来搜索
你可以使用HTML和CSS来创建这个搜索栏。以下是一个示例代码:
<!DOCTYPE html>
<html>
<head>
<style>
.search-container {
display: flex;
align-items: center;
padding: 10px;
border-radius: 20px;
border: 1px solid #ccc;
}
.search-container input[type="text"] {
flex: 1;
padding: 5px;
border: none;
border-radius: 20px 0 0 20px;
}
.search-container select {
padding: 5px;
border: none;
}
.search-container button {
padding: 5px 10px;
border: none;
background-color: #fff;
border-radius: 0 20px 20px 0;
cursor: pointer;
}
</style>
</head>
<body>
<div class="search-container">
<select id="search-engine">
<option value="sogou">搜狗</option>
<option value="baidu">百度</option>
<option value="bing">Bing</option>
<option value="google">Google</option>
</select>
<input type="text" id="search-input" placeholder="请输入搜索内容">
<button onclick="search()">搜索</button>
</div>
<script>
function search() {
var searchEngine = document.getElementById("search-engine").value;
var searchContent = document.getElementById("search-input").value;
switch (searchEngine) {
case "sogou":
window.location.href = "https://www.sogou.com/search?q=" + searchContent;
break;
case "baidu":
window.location.href = "https://www.baidu.com/s?wd=" + searchContent;
break;
case "bing":
window.location.href = "https://www.bing.com/search?q=" + searchContent;
break;
case "google":
window.location.href = "https://www.google.com/search?q=" + searchContent;
break;
default:
break;
}
}
</script>
</body>
</html>
在这个示例中,我们使用了一个<div>元素来创建搜索栏的容器,并为其添加了.search-container类。搜索栏的左边是一个<select>元素,用户可以选择搜索引擎。中间是一个<input>元素,用户可以输入搜索内容。右边是一个<button>元素,用户点击该按钮将触发搜索功能。
使用CSS样式来设置搜索栏的样式,包括边框圆角、背景颜色和间距。
在JavaScript部分,我们定义了一个search()函数,该函数将根据用户选择的搜索引擎和输入的搜索内容来执行相应的搜索操作。例如,如果选择了搜狗作为搜索引擎并输入了搜索内容,将会通过window.location.href来跳转到搜狗搜索页面,并将搜索内容作为查询参数传递给搜狗搜索引擎。其他搜索引擎的处理方式类似。
请注意,这只是一个基本示例,你可以根据自己的需求进行修改和扩展。
原文地址: https://www.cveoy.top/t/topic/i8QW 著作权归作者所有。请勿转载和采集!