css中搜索框怎么做

搜索框是很常见的网页元素，可以让用户方便地搜索相关内容。在CSS中，可以利用一些技巧来实现一个好看的搜索框。
首先，我们需要准备一个HTML结构，包含一个输入框和一个搜索按钮，如下所示：

<form>
  <input type="text" placeholder="请输入搜索内容" />
  <button type="submit">搜索</button>
</form> 

这是一个简单的搜索框结构，包含一个输入框和一个搜索按钮，使用了标签包裹起来。接下来，我们可以使用CSS对其进行美化。
首先，我们可以设置输入框的样式。一个常见的样式是将边框设置为圆角，代码如下：

input[type="text"] {
  border-radius: 20px;
  padding: 10px;
  border: 2px solid #ccc;
  outline: none;
  width: 300px;
} 

这段代码会将输入框的边框设置为圆角矩形，边框宽度为2px，颜色为#ccc。同时，也设置了输入框的内边距为10px，使得输入框内的文字不会紧贴着边框显示。使用outline:none可以去除输入框的轮廓线。width:300px可以设置输入框的宽度为300px。
接下来，我们可以设置搜索按钮的样式。一个常见的样式是将按钮设置为红色背景和白色文字，同时将边框设置为圆角。代码如下：

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

这段代码会将按钮的边框设置为圆角矩形，背景设置为#c0392b，文字颜色设置为白色。padding:10px 20px可以设置按钮的内边距，使得按钮内的文字不会紧贴着边框显示。border:none可以去除按钮的边框。cursor:pointer可以将鼠标悬停在按钮上时变为手型。
最后，我们需要将输入框和搜索按钮放在一起，并进行布局。一个常见的布局是将它们水平排列，并使用一些样式来让它们在同一行显示。代码如下：

form {
  display: inline-block;
  position: relative;
}

input[type="text"] {
  float: left;
}

button[type="submit"] {
  position: absolute;
  right: 0;
} 

这段代码会将标签的display属性设置为inline-block，使得它可以水平排列。接下来，使用float:left将输入框向左浮动，使其与左侧对齐。最后，在搜索按钮上使用position:absolute和right:0，将按钮置于右侧，并使其与输入框对齐。
通过上面的CSS代码，我们就可以创建一个美观的搜索框了。当然，还有很多其他的CSS技巧可以用来实现更多不同风格的搜索框，需要根据具体情况进行选择。