css实现切换搜索引擎

CSS是前端开发必备技能之一，它可以用来美化网页，同时也可以实现一些便捷的功能。今天我们来看一下如何使用CSS实现切换搜索引擎。

/*CSS样式*/
.search{
  margin:10px 0;
  position:relative;
  width:200px;
  height:32px;
  background:#fff;
  border-radius: 16px;
  Box-shadow: 0 1px 6px rgba(32,33,36,0.28);
  overflow: hidden;
}

.search:focus-within{
  width:290px;
}

.search label{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:60px;
  height:20px;
  margin:auto;
  font-size: 14px;
  color:#9b9b9b;
  transition: all .2s ease;
  pointer-events:none;
}

.search input{
  background:none;
  border:none;
  outline:none;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
  width:100%;
  font-size: 14px;
  padding-left:16px;
}

.search button{
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  height:36px;
  width:60px;
  color:#fff;
  font-size:14px;
  background:#1a73e8;
  border:none;
  border-radius: 0 16px 16px 0;
  cursor:pointer;
}

以上是CSS样式，现在我们来看一下如何使用CSS实现切换搜索引擎。这是一个具有搜索功能的搜索框，可以根据用户的选择切换搜索引擎。

  请输入搜索内容
  搜索
  百度
谷歌
必应

我们在HTML中添加了一个select元素，用户可以选择需要使用的搜索引擎。然后，我们通过JavaScript获取用户选择的值，使用该值来生成完整的搜索链接，并在新窗口中打开。

//JavaScript 代码
function getUrl(val){
  var searchVal = document.getElementById('search-input').value;
  var url = val + searchVal;
  return url;
}

这样，我们就实现了通过CSS切换搜索引擎的功能。用户可以根据需要选择使用百度、谷歌或必应进行搜索。