xiao127
xiao127
  • 发布:2017-07-28 12:13
  • 更新:2017-07-28 12:13
  • 阅读:4162

带右侧按钮的搜索栏的实现

分类:MUI

目前mui官方只有一个搜索栏示例供参考,但是只是一个输入框而已,很多时候这并不是我们想要的。
我们有时只是想要一个常规的搜索栏:左边输入框,右边紧接一个确定按钮。
在这里分享一下,我个人的代母,效果图如下:

实现的代码:
<!-- 搜索栏 -->
<div style="display:inline-flex; width:100%; padding-left:1px; padding-right:1px;">
<div class="mui-input-row" style="height:40px; flex-grow:4;">
<input type="text" class="mui-input-clear s_font-size2" placeholder="医院名称" maxlength="100" style="height:100%; padding-right:32px;"/>
</div>
<div style="height:40px; flex-grow:1;">
<input type="button" value="搜索" class="u_btn" style="width:100%; height:100%;"/>
</div>
</div>

4 关注 分享
lhyh 6***@qq.com HBK kusokuma

要回复文章请先登录注册