css中怎样设置一个搜素框

CSS中怎样设置一个搜索框？

/* 首先，我们需要一个输入框 */
input[type="text"] {
  /* 设置宽度 */
  width: 200px;
  /* 设置高度 */
  height: 30px;
  /* 设置边框，颜色为灰色，宽度为1像素 */
  border: 1px solid #ccc;
  /* 设置圆角 */
  border-radius: 5px;
  /* 设置内边距，让文字不贴边 */
  padding: 5px;
}

/* 接下来，我们需要一个搜索按钮 */
input[type="submit"] {
  /* 设置按钮文字 */
  value: "搜索";
  /* 设置背景颜色，这里为灰色 */
  background-color: #ccc;
  /* 设置边框，和输入框一样 */
  border: 1px solid #ccc;
  /* 设置圆角 */
  border-radius: 5px;
  /* 设置内边距，让文字不贴边 */
  padding: 5px;
  /* 设置文字颜色 */
  color: white;
}

/* 最后，我们把它们结合起来 */
form {
  /* 把输入框和搜索按钮放在一行 */
  display: inline-block;
} 

使用这些CSS代码，你就可以轻松地设置一个漂亮的搜索框了！