[分享]css做百度框

用CSS实现百度搜索框是一项很有趣的任务。这里我们将使用HTML、CSS和一些JavaScript来实现它。首先，我们需要一个HTML元素来表示搜索框。我们可以使用一个表单元素和一个input元素来构...

用CSS实现百度搜索框是一项很有趣的任务。这里我们将使用HTML、CSS和一些JavaScript来实现它。

首先，我们需要一个HTML元素来表示搜索框。我们可以使用一个表单元素和一个input元素来构建它：

<form>
  <input type="text" placeholder="在百度中搜索">
</form> 

现在，我们需要使用CSS来使输入框看起来像百度搜索框。我们可以使用以下代码来设置输入框的样式：

input {
  width: 500px;
  height: 30px;
  font-size: 18px;
  padding: 10px;
  border: none;
  border-radius: 30px;
  box-shadow: 0px 0px 5px 0px #ccc;
} 

这段代码将设置输入框的宽度、高度、字体大小、内边距、边框、圆角半径和阴影。现在我们的搜索框看起来已经不错了。

但是，我们还需要添加搜索按钮。我们可以使用以下代码来创建一个带有放大镜图标的按钮：

button {
  width: 60px;
  height: 50px;
  border: none;
  background-color: #3385FF;
  border-radius: 0px 30px 30px 0px;
  cursor: pointer;
}
button::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  margin: 15px;
  border: 3px solid #fff;
  border-radius: 50%;
  border-top: none;
  border-right: none;
  transform: rotate(45deg);
} 

这段代码将设置按钮的宽度、高度、边框、背景颜色、圆角半径和光标样式。我们还使用伪元素来创建放大镜图标，确保它被垂直居中。

最后，我们需要用一些JavaScript来使输入框和按钮可以工作。我们可以使用以下代码来添加事件监听器：

const form = document.querySelector("form");
const input = document.querySelector("input");
const button = document.querySelector("button");

form.addEventListener("submit", (event) => {
  event.preventDefault();
  window.location.href = "https://www.baidu.com/s?wd=" + input.value;
});

button.addEventListener("click", () => {
  form.submit();
}); 

这段代码将使用事件监听器来处理表单的提交，以及在用户点击按钮时提交表单。

现在我们的搜索框已经完美地模仿了百度搜索框。我们可以使用这个搜索框来寻找我们需要的任何信息。