现在移动开发为主流的时代,少不了使用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 输入框无边框的更多相关文章

  1. jQuery Mobile学习笔记

    1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) ...

  2. jQuery Mobile 网格布局

    jQuery Mobile 布局网格 jQuery Mobile 提供了一套基于 CSS 的列布局方案.不过,一般不推荐在移动设备上使用列布局,这是由于移动设备的屏幕宽度所限. 但是有时你需要定位更小 ...

  3. jQuery Mobile Data 属性

    按钮 带有 data-role="button" 的超链接.button 元素.工具栏中的链接以及 input 字段都会自动渲染成按钮样式,不需要添加 data-role=&quo ...

  4. jQuery Mobile笔记

    1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) ...

  5. jQuery Mobile 所有data-*选项,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) jQuery Mobile事件全解 jQuery Mobile 所有class选项 jQuery Mobile 所有data-*选项 jQuery Mobile 所 ...

  6. jQuery Mobile入门

    转:http://www.cnblogs.com/linjiqin/archive/2011/07/17/2108896.html 简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的 ...

  7. Jquery mobile 新手问题总汇

    1页面缩放显示问题 问题描述: 页面似乎被缩小了,屏幕太宽了. 解决办法: 在head标签内加入: <meta name="viewport" content="w ...

  8. PyQt之布局&无边框&信号

    这个例子相对综合一些,包括qt的布局,实现无边框效果,无边框也就是没有了窗口的title栏,没有title栏就不能拖动了, 所以我们进一步讲如何实现拖动.通过这边文章你可以掌握qt的布局,窗口定制,重 ...

  9. [转载]Jquery mobile 新手问题总汇

    原文链接:http://www.wglong.com/main/artical!details?id=4 此文章将会持续更新,主要收录一些新手比较常见的问题. 欢迎 向我推荐比较典型的常见问题,我会记 ...

随机推荐

  1. FFmpeg官方文档之————先进音频编码(AAC)

    先进音频编码(AAC)的后继格式到MP3,和以MPEG-4部分3(ISO / IEC 14496-3)被定义.它通常用于MP4容器格式; 对于音乐,通常使用.m4a扩展名.第二最常见的用途是在MKV( ...

  2. Thread.join()方法

    thread.Join把指定的线程加入到当前线程,可以将两个交替执行的线程合并为顺序执行的线程.比如在线程B中调用了线程A的Join()方法,直到线程A执行完毕后,才会继续执行线程B.t.join() ...

  3. PBOC~PPT-补充内容B(转)

    PBOC电子现金基于借记/贷记应用上小额支付的一种实现.在借记卡上可以解释为预付,在贷记卡上可以解释为预先授权.预付的金额或预授权额度在卡片中体现为可脱机消费的金额,也就是电子现金余额.电子现金解决方 ...

  4. POJ Challenge消失之物

    Description ftiasch 有 N 个物品, 体积分别是 W1, W2, ..., WN. 由于她的疏忽, 第 i 个物品丢失了. "要使用剩下的 N - 1 物品装满容积为 x ...

  5. sublime 3 安装go环境

    安装go环境是在go已经安装的情况下, 1 首先安装 Package Control ctrl + · 打开sublime 命令行模式 复制粘贴以下代码 import urllib.request,o ...

  6. Access使用join进行多个表联合查询的问题

    Access是支持三表或三表以上的join查询的,但是要加括号,如果不加的话,会报错,括号的作用是决定join的顺序.例如: SELECT *FROM (aa LEFT JOIN bb ON aa.a ...

  7. 使用script创建标签添加属性值和添加样式

    <mark>使用script创建标签和给标签属性值以及样式的方法</mark><script> window.onload=function(){ var btn= ...

  8. Sort Colors [LeetCode]

    Given an array with n objects colored red, white or blue, sort them so that objects of the same colo ...

  9. Windows 10系统更换Windows 7系统磁盘分区注意事项二

    1.在原WIN10系统中将硬盘的GPT分区表格式转换为MBR分区表格式 上一篇关于新机预装WIN10系统更换为WIN7系统中说到需要将硬盘的GPT分区表格式转换为MBR分区表格式,在文章末尾给出的链接 ...

  10. UIKit - scrollView缩放、滚动

    UIScrollView滚动 三大属性: self.scrollView.pageEnabled = NO  是否分页:n只要将UIScrollView的pageEnabled属性设置为YES,UIS ...