[分享]css中怎么做收索框

CSS样式是网页设计中的重要组成部分，搜索框通常也是网页上必不可少的一个元素。那么，如何在CSS中制作一个简单却实用的搜索框呢？下面介绍一些实用的CSS代码。/HTML代码/ 搜索 /CSS代码/ ...

CSS样式是网页设计中的重要组成部分，搜索框通常也是网页上必不可少的一个元素。那么，如何在CSS中制作一个简单却实用的搜索框呢？下面介绍一些实用的CSS代码。

/*HTML代码*/
<form action="#">
  <input type="text" name="search" placeholder="请输入搜索内容">
  <button>搜索</button>
</form>

/*CSS代码*/
/*搜索框样式*/
input[type="text"] {
  padding: 10px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  box-shadow: 0 2px 2px rgba(0,0,0,0.2);
}

/*搜索按钮样式*/
button {
  padding: 10px 20px;
  background: #4CAF50;
  border: none;
  color: #FFF;
  border-radius: 5px;
  cursor: pointer;
}

/*鼠标悬停在搜索按钮上的效果*/
button:hover {
  background: #3e8e41;
}

/*搜索框及按钮的布局*/
form {
  display: flex;
  flex-wrap: wrap;
}

input[type="text"],
button {
  flex: 1;
  margin-right: 10px;
  margin-bottom: 10px;
}

button {
  flex: 0;
} 

上面的代码中，HTML代码中的form包含一个文本框和一个按钮，CSS代码中对这些元素进行了样式的设置，包括文本框的边框、背景、圆角、阴影等；按钮的背景色、边框、颜色、圆角以及悬停时的背景色等。而搜索框及按钮的布局则是使用了flexbox布局，通过设置flex属性和margin属性控制元素之间的间距和宽度。

在实际的网页设计中，搜索框可能还需要根据需求进行一些额外的样式调整，比如背景图案、动态效果、响应式等等。但是，以上代码提供了一个制作简单实用的搜索框的基本思路和方法，读者可以在此基础上进行更加丰富多彩的创意实现。