JZTXT

微信小程序15 做一个搜索框的样式

发布时间 2023-08-08 15:09:39作者: luytest

一般来说首页上都会有搜索的功能，那么我们来加个搜索框试试

在newlist上继续操作

 

简单搜索框的布局和样式

页面上

<view class="headClass">
<input type="text" placeholder="请输入"></input>
</view>

但是这样太丑了，完善一下样式

.headClass{
  background-color: silver;
  height: 40px;
  overflow: hidden;
}
.headClass input{
  width: 80%;
  background-color: white;
  color: black;
  margin: 10px auto auto;
  border-radius: 5px;
　font-size: 12px;
  padding-left: 5px;
  padding-right: 5px;

}

样式这个东西不经常写前端的可能不太熟，但是简单的一些样式效果、布局啥的百度一下都能查到，一般来说也不会考虑特别复杂的样式。

稍微解释一下，按顺序。

.headClass 设置了 背景色，高度，overflow控制的是高度的溢出效果，配合input里的 margin-top 来让输入框处于view的中间。

.headClass input 设置了宽度，背景色，文字颜色，margin 是 简写的 分别是 top,left,right的元素距离，

　　border-radius 是让输入框是圆角好看些，

　　设置文本字体大小为12px

　　最后设置左右填充5px，这个就类似上面margin的详细写法，分别是设置left和right部分，看起来比较直观点。

效果，虽然难看但是是我们手动写的哈哈哈哈。