[分享]css中怎么加入搜索框

在网页设计中，搜索框是一个非常常见的元素，它可以让用户方便地搜索内容。在CSS中，我们可以使用一些简单的代码来添加一个搜索框。首先，我们需要在HTML代码中添加一个输入框和一个按钮。比如： 搜索 在...

在网页设计中，搜索框是一个非常常见的元素，它可以让用户方便地搜索内容。在CSS中，我们可以使用一些简单的代码来添加一个搜索框。
首先，我们需要在HTML代码中添加一个输入框和一个按钮。比如：

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

在这个例子中，输入框的类型是文本框，占位符是“Search…”，而按钮是一个提交按钮，显示的文字是“搜索”。
接着，我们可以使用CSS样式来装饰这个搜索框。比如：

input[type="text"] {
  padding: 10px;
  border: none;
  border-radius: 20px;
  outline: none;
}

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

在这个例子中，我们设置了输入框和按钮的内边距，边框和圆角，以及背景色和字体颜色。我们还使用了“outline: none”来去除输入框的默认轮廓线条，以使得搜索框更加美观。
最后，我们将这些样式应用到输入框和按钮上。我们可以将它们包裹在一个容器中，并在CSS样式中使用类选择器来选中这个容器和其中的元素。比如：

<div class="search-container">
  <form>
    <input type="text" placeholder="Search...">
    <button type="submit">搜索</button>
  </form>
</div>

.search-container input[type="text"] {
  /* 输入框的样式 */
}

.search-container button[type="submit"] {
  /* 按钮的样式 */
} 

通过这种方法，我们可以轻松地在网页中添加一个美观实用的搜索框。