jquery mobile 输入框无边框
2016-05-10 12:29
573 查看
现在移动开发为主流的时代,少不了使用jquery mobile。但是偶然应项目要求需要把input输入框做成无边框的,不是特别容易的事,网上找了很多都没有一种靠谱的解决方案,只能自食其力了。
先废话一句:在电脑端去边框,一般使用border:0; outline:none; 就可以了,知道的童鞋就放我废话了,呵~呵~
首先,看一下引用了jquery mobile后,输入框发生的变化(下划线为新生成部分,粉色为获取焦点后新生成部分):
分析:<input>
1)内阴影(浅灰色):<input>存放在input内,被[style]background属性控制。
2)外边框(灰色):存放在input外的div内,被[style]border属性控制。
3)外阴影(蓝色):存放在input外的div内,当获得焦点时class新增ui-focus,被[style]box-shadow属性控制。
分析:<textarea>
1)内阴影(浅灰色):存放在textarea内,被[style]box-shadow属性控制。
2)外边框(灰色):存放在textarea内,被[style]border属性控制。
3)外阴影(蓝色):存放在textarea内,当获得焦点时class新增ui-focus,被[style]box-shadow属性控制。
4)自动缩放(右下角):存放在textarea内,被[style]resize属性控制。
分析完后,只要加入以下样式就可以实现无边框了
<div data-role="page" id="pageone"> <input type="text" /> <textarea rows="5"></textarea> </div>
先废话一句:在电脑端去边框,一般使用border:0; outline:none; 就可以了,知道的童鞋就放我废话了,呵~呵~
首先,看一下引用了jquery mobile后,输入框发生的变化(下划线为新生成部分,粉色为获取焦点后新生成部分):
<div data-role="page" id="pageone" data-url="pageone"tabindex="0"class="ui-page ui-page-theme-a ui-page-active"style="min-height: 480px;"> <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset ui-focus"> <input type="text" /> </div> <textarea rows="5"class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset ui-focus"></textarea> </div>
分析:<input>
1)内阴影(浅灰色):<input>存放在input内,被[style]background属性控制。
2)外边框(灰色):存放在input外的div内,被[style]border属性控制。
3)外阴影(蓝色):存放在input外的div内,当获得焦点时class新增ui-focus,被[style]box-shadow属性控制。
分析:<textarea>
1)内阴影(浅灰色):存放在textarea内,被[style]box-shadow属性控制。
2)外边框(灰色):存放在textarea内,被[style]border属性控制。
3)外阴影(蓝色):存放在textarea内,当获得焦点时class新增ui-focus,被[style]box-shadow属性控制。
4)自动缩放(右下角):存放在textarea内,被[style]resize属性控制。
分析完后,只要加入以下样式就可以实现无边框了
<style type="text/css"> .ui-input-text input, .ui-input-search input { background:#fff;} .ui-input-text, .ui-input-search { border:0px;} .ui-page-theme-a .ui-focus,.ui-page-theme-a textarea{ box-shadow: none; resize:none;} </style>
相关文章推荐
- jquery获取input单选按钮点击事件及单选按钮值的方法
- 无刷新分页 jquery.pagination.js
- 页面引入jQuery mobile 底部出现loading字样
- jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
- jquery 加载等待效果
- jQuery选择器基础入门教程
- jquery实现图片上传前本地预览功能
- 基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
- 基于jquery实现三级下拉菜单
- jQuery Dialog对话框事件用法实例分析
- jquery插件汇总
- Js/Jquery获取iframe中的元素
- jQuery的文档处理程序详解
- jQuery分析(1) - 介绍
- jquery判断浏览器类型的代码
- jQuery 插件学习
- jQuery datepicker和jQuery validator 共用时bug
- jQuery对象与DOM对象转换方法详解
- jQuery对象的链式操作用法分析
- Jquery Ajax--- get,post,ajax方法返回json数据