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>