删除输入jquery手机的边框 [英] remove borders of input jquery mobile

问题描述

如何退出JQuery Mobile中的输入边框？

>

这是我的代码：

 < div class =ui-block-a > 
< label for =textinput_nickclass =ui-hidden-accessibledata-t =form_nick>< / label> 
< input type =textname =nickid =textinput_nickplaceholder =form_nickvalue =data-mini =truemaxlength =80 
< / div> 
  

解决方案

自 jQuery Mobile 1.4 ，您可以在没有任何JS干预的情况下将自定义CSS应用于输入。创建自定义类，并使用 data-wrapper-class 属性将其添加到输入。

自订CSS

  .ui-input-text.ui-custom {
 border：none; 
 box-shadow：none; 
} 
  

将其添加到 input

 < input type =textdata-wrapper-class =ui-custom/& 
  

演示

---

在jQuery Mobile 1.3&较早，输入是不可见的，并替换为包含所有样式的div .ui-input-text >

要删除边框，您需要从 .ui-input-text 中删除​​ / code>本身为隐形。

  .ui-input-text {
 border：none; 
} 
  

要移除内阴影它在JS。将代码包含在 pagecreate 中，每页生效一次。

  $ （document）.on（pagecreate，function（）{
 $（。ui-input-text）。removeClass（ui-shadow-inset）; 
} 
  





演示




How can I quit the borders of a input in JQuery Mobile?

This is my code:

<div class="ui-block-a">
 <label for="textinput_nick" class="ui-hidden-accessible" data-t="form_nick"></label>
 <input type="text" name="nick" id="textinput_nick" placeholder="form_nick" value="" data-mini="true" maxlength="80">
</div>

解决方案

As of jQuery Mobile 1.4, you can apply custom CSS to input without any JS intervention. Create a custom class and add it to input by using data-wrapper-class attribute.

Custom CSS

.ui-input-text.ui-custom {
   border: none;
   box-shadow: none;
}

Add it to input

<input type="text" data-wrapper-class="ui-custom" />

Demo

---

In jQuery Mobile 1.3 & earlier, input is invisible and replaced with a div .ui-input-text that holds all styles.

To remove border, you need to remove it from .ui-input-text not input itself as it's invisible.

.ui-input-text {
  border: none;
}

To remove inner shadow, you have to do it in JS. Wrap your code in pagecreate to take effect once per page.

$(document).on("pagecreate", function () {
  $(".ui-input-text").removeClass("ui-shadow-inset");
});

Demo

这篇关于删除输入jquery手机的边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！