【微信小程序】搜索框样式

最新推荐文章于 2023-11-01 17:01:03 发布

Pulseum

最新推荐文章于 2023-11-01 17:01:03 发布

阅读量4.5k

点赞数 12

分类专栏：微信小程序文章标签：微信小程序小程序 css

本文链接：https://blog.csdn.net/qq_53472371/article/details/122691269

版权

微信小程序专栏收录该内容

6 篇文章 0 订阅

订阅专栏

实现微信小程序搜索框样式

搜索框效果：

代码实现：（复制可用）

index.wxml：

<!--pages/index/index.wxml-->
<view>
  <view class="top">
    <view class="search">
      <view class="search_in">
        <!-- 使用代码请更改图片路径 -->
        <image src="../../image/search.png"></image>
        <input type="text" placeholder="请输入搜索内容"/>
        <view class="search_btn">搜索</view>
      </view>
    </view>
  </view>
</view>

index.wxss：

/* pages/index/index.wxss */
.search {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90rpx;
  background-color: #16a0f8;
}
.search .search_in {
  display: flex;
  align-items: center;
  justify-content:space-between;
  padding:0 20rpx ;
  box-sizing: border-box;
  height: 70rpx;
  width: 710rpx;
  background-color: #ffffff;
  border-radius: 35rpx;
}
.search_in image {
  height: 45rpx;
  width: 45rpx;
}
.search input {
  width: 480rpx;
}
.search_in .search_btn {
  height: 55rpx;
  width: 110rpx;
  border-radius: 55rpx;
  background-color: #6cd3ff;
  color: #ffffff;
  text-align: center;
  line-height: 55rpx;
  cursor: pointer;
}