微信小程序之搜索框样式(带源码)

一、效果图:

点击搜索框,"请输入搜索内容消失",可输入关键字

二、代码:

2.1、WXML代码:

html 复制代码
<!--搜索框部分-->
    <view class="search">
        <view class="search-btn">🔍</view>
        <input type="text" placeholder="请输入搜索内容" bindinput="onSearchInput" value="{{search}}" />
        <view class="search_btn"   bindtap="onSearch">搜索</view>
    </view>

2.2、WXSS代码:

css 复制代码
/* 搜索框*/

.search {
    display: flex;
    align-items: center;
    height: 90rpx;
    width: 720rpx;
    justify-content: space-between;
    padding: 0 20rpx;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    box-sizing: border-box;
    background-color: blue;
    opacity: 0.8;
    border-radius: 40rpx;
}

.search input {
    width: 480rpx;
}

.search .search_btn {
    height: 55rpx;
    width: 110rpx;
    border-radius: 55rpx;
    background-color: blue;
    color: #ffffff;
    text-align: center;
    line-height: 55rpx;
    cursor: pointer;
}
相关推荐
小岛前端34 分钟前
🔥Vue3 移动端组件精选!满足各种场景!
前端·vue.js·微信小程序
cesske1 小时前
uniapp 编译支付宝小程序canvas 合成图片实例,支付宝小程序 canvas 渲染图片 可以换成自己的图片即可
小程序·uni-app·apache
從南走到北4 小时前
JAVA代泊车接机送机服务代客泊车系统源码支持小程序+APP+H5
java·开发语言·微信小程序·小程序
木易 士心10 小时前
组织架构树形选择组件使用说明(Vue3 + UniApp)
微信小程序·钉钉·notepad++
软件技术员11 小时前
微信小程序电子测宅堪墓风水罗盘
微信小程序·小程序
future_studio11 小时前
聊聊 Unity(小白专享、C# 小程序 之 播放器)
unity·小程序·c#
Q_Q51100828512 小时前
python+uniapp基于微信小程序的旅游信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
小Tomkk12 小时前
Rokid 开发空间小程序 实战
3d·小程序·rokid·jsar
说私域12 小时前
基于多模态AI技术的传统行业智能化升级路径研究——以开源AI大模型、AI智能名片与S2B2C商城小程序为例
人工智能·小程序·开源
2501_9160074714 小时前
iOS 混淆工具链实战,多工具组合完成 IPA 混淆与加固(iOS混淆|IPA加固|无源码混淆|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview