现在移动开发为主流的时代，少不了使用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>