app搜索框 css

随着智能手机的普及，越来越多的网站开始提供移动端的访问，这时我们通常会使用app来浏览网站。而在app中，搜索框也是一个非常重要的元素，让用户可以快速地找到他们需要的信息。而为了让搜索框看起来更加美观和可用，我们需要使用CSS来对其进行样式设计。

/*搜索框的样式*/
.search-Box {
  position: relative;
  display: inline-block;
  width: 80%;
  max-width: 300px;
}
/*搜索框输入框的样式*/
.search-Box input[type=text] {
  width: 100%;
  padding: 10px;
  border: none;
  Box-shadow: 0 0 5px #ccc;
}
/*搜索框按钮的样式*/
.search-Box button[type=submit] {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  background-color: #333;
  color: #fff;
  border: none;
}

以上代码示例展示了搜索框的基本样式，其中我们使用了一个类名为.search-Box的div作为容器，内部包含了一个input类型为text的输入框和一个button类型为submit的按钮。通过设置容器的宽度和最大宽度，我们可以保证搜索框在不同尺寸的屏幕上都能够正常显示。在输入框的样式中，我们设置了宽度、内边距和边框等属性，以及一个灰色的阴影来让搜索框看起来更加立体。而按钮的样式则设置了在容器的右上角，背景为黑色，前景色为白色，没有边框。

当然，以上样式只是搜索框样式的一个简单示例，我们可以根据实际需求进行定制化。例如，可以对输入框的聚焦状态进行特殊效果，或者添加一些图标来丰富搜索框的内容。祝大家在设计app搜索框时能够寻找到最合适的样式。