<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>
<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>
多引擎搜索栏代码:一键切换搜狗、百度、必应、谷歌搜索

原文地址: https://www.cveoy.top/t/topic/lDpZ 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录