jquery mobile 输入框无边框
现在移动开发为主流的时代,少不了使用jquery mobile。但是偶然应项目要求需要把input输入框做成无边框的,不是特别容易的事,网上找了很多都没有一种靠谱的解决方案,只能自食其力了。
<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 mobile 输入框无边框的更多相关文章
- jQuery Mobile学习笔记
1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) ...
- jQuery Mobile 网格布局
jQuery Mobile 布局网格 jQuery Mobile 提供了一套基于 CSS 的列布局方案.不过,一般不推荐在移动设备上使用列布局,这是由于移动设备的屏幕宽度所限. 但是有时你需要定位更小 ...
- jQuery Mobile Data 属性
按钮 带有 data-role="button" 的超链接.button 元素.工具栏中的链接以及 input 字段都会自动渲染成按钮样式,不需要添加 data-role=&quo ...
- jQuery Mobile笔记
1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) ...
- jQuery Mobile 所有data-*选项,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile事件全解 jQuery Mobile 所有class选项 jQuery Mobile 所有data-*选项 jQuery Mobile 所 ...
- jQuery Mobile入门
转:http://www.cnblogs.com/linjiqin/archive/2011/07/17/2108896.html 简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的 ...
- Jquery mobile 新手问题总汇
1页面缩放显示问题 问题描述: 页面似乎被缩小了,屏幕太宽了. 解决办法: 在head标签内加入: <meta name="viewport" content="w ...
- PyQt之布局&无边框&信号
这个例子相对综合一些,包括qt的布局,实现无边框效果,无边框也就是没有了窗口的title栏,没有title栏就不能拖动了, 所以我们进一步讲如何实现拖动.通过这边文章你可以掌握qt的布局,窗口定制,重 ...
- [转载]Jquery mobile 新手问题总汇
原文链接:http://www.wglong.com/main/artical!details?id=4 此文章将会持续更新,主要收录一些新手比较常见的问题. 欢迎 向我推荐比较典型的常见问题,我会记 ...
随机推荐
- FFmpeg官方文档之————先进音频编码(AAC)
先进音频编码(AAC)的后继格式到MP3,和以MPEG-4部分3(ISO / IEC 14496-3)被定义.它通常用于MP4容器格式; 对于音乐,通常使用.m4a扩展名.第二最常见的用途是在MKV( ...
- Thread.join()方法
thread.Join把指定的线程加入到当前线程,可以将两个交替执行的线程合并为顺序执行的线程.比如在线程B中调用了线程A的Join()方法,直到线程A执行完毕后,才会继续执行线程B.t.join() ...
- PBOC~PPT-补充内容B(转)
PBOC电子现金基于借记/贷记应用上小额支付的一种实现.在借记卡上可以解释为预付,在贷记卡上可以解释为预先授权.预付的金额或预授权额度在卡片中体现为可脱机消费的金额,也就是电子现金余额.电子现金解决方 ...
- POJ Challenge消失之物
Description ftiasch 有 N 个物品, 体积分别是 W1, W2, ..., WN. 由于她的疏忽, 第 i 个物品丢失了. "要使用剩下的 N - 1 物品装满容积为 x ...
- sublime 3 安装go环境
安装go环境是在go已经安装的情况下, 1 首先安装 Package Control ctrl + · 打开sublime 命令行模式 复制粘贴以下代码 import urllib.request,o ...
- Access使用join进行多个表联合查询的问题
Access是支持三表或三表以上的join查询的,但是要加括号,如果不加的话,会报错,括号的作用是决定join的顺序.例如: SELECT *FROM (aa LEFT JOIN bb ON aa.a ...
- 使用script创建标签添加属性值和添加样式
<mark>使用script创建标签和给标签属性值以及样式的方法</mark><script> window.onload=function(){ var btn= ...
- Sort Colors [LeetCode]
Given an array with n objects colored red, white or blue, sort them so that objects of the same colo ...
- Windows 10系统更换Windows 7系统磁盘分区注意事项二
1.在原WIN10系统中将硬盘的GPT分区表格式转换为MBR分区表格式 上一篇关于新机预装WIN10系统更换为WIN7系统中说到需要将硬盘的GPT分区表格式转换为MBR分区表格式,在文章末尾给出的链接 ...
- UIKit - scrollView缩放、滚动
UIScrollView滚动 三大属性: self.scrollView.pageEnabled = NO 是否分页:n只要将UIScrollView的pageEnabled属性设置为YES,UIS ...