[分享]css与HTML制作搜索框

在网页设计过程中，搜索框是一个必不可少的元素。HTML和CSS可以很容易地创建一个漂亮的搜索框，本文将介绍如何使用HTML和CSS制作一个基本的搜索框。 搜索 上述代码使用HTML创建了一个非常基本...

在网页设计过程中，搜索框是一个必不可少的元素。HTML和CSS可以很容易地创建一个漂亮的搜索框，本文将介绍如何使用HTML和CSS制作一个基本的搜索框。

<form>
  <input type="text" placeholder="Search...">
  <button type="submit">搜索</button>
</form> 

上述代码使用HTML创建了一个非常基本的搜索框。在form标签中，我们使用了input标签来创建文本输入框， 使用placeholder属性为输入框设定了默认提示信息"Search..."。

此外，我们还使用了button标签来创建一个搜索按钮。当用户在搜索框中输入搜索内容后，通过点击搜索按钮即可完成对网站文章内容的搜索。

input[type="text"] {
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 10px;
  font-size: 16px;
}

button[type="submit"] {
  padding: 10px 32px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
}

button[type="submit"]:hover {
   background-color: #45a049;
} 

上述代码使用CSS样式为搜索框和按钮进行了样式设计。首先，我们使用了CSS的选择器技术来对input和button标签进行样式设置。padding 属性规定元素的内边距， border属性规定元素的边框， border-radius属性指定了元素的圆角大小。

另外，我们还对button进行了一些额外的样式定义， 如改变 button 的背景颜色、调整字体大小等， 当用户将鼠标移动到搜索按钮上时， 背景颜色会发生变化， 为交互效果提升。

综上，HTML和CSS语言可以帮助我们轻松地创建一个漂亮且交互易用的搜索框，甚至还可以添加动态效果， 为用户提供更好的搜索体验。