微信小程序搜索框样式
时间: 2023-08-25 17:06:35 浏览: 110
微信小程序的搜索框样式可以通过自定义组件来实现。以下是一个示例代码,可以用来创建一个简单的搜索框样式:
```html
<view class="search-box">
<input class="search-input" placeholder="请输入搜索内容" bindinput="onInputChange" />
<button class="search-button" bindtap="onSearch">搜索</button>
</view>
```
```css
.search-box {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
background-color: #f5f5f5;
}
.search-input {
flex: 1;
height: 30px;
padding: 0 10px;
border: none;
border-radius: 15px;
background-color: #fff;
}
.search-button {
margin-left: 10px;
height: 30px;
padding: 0 10px;
border: none;
border-radius: 15px;
background-color: #007aff;
color: #fff;
}
```
在这个示例中,我们使用了一个 `view` 组件作为搜索框的容器,内部包含了一个 `input` 组件和一个 `button` 组件。通过设置相应的样式,可以实现一个简单的搜索框样式。你可以根据需要自定义样式,比如调整尺寸、颜色等。
另外,还可以使用 `bindinput` 绑定输入框的输入事件,以及 `bindtap` 绑定按钮的点击事件,来实现搜索功能的相关逻辑。