删除输入jquery mobile的边框

Question

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

这是我的代码:

<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>

Answer 1

从jQuery Mobile 1.4开始,您可以在input没有任何JS干预的情况下应用自定义CSS .创建自定义类并input使用data-wrapper-class属性将其添加到.

自定义CSS

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

添加到 input

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

演示

在jQuery Mobile 1.3及更早版本中,它input是隐形的,并替换为.ui-input-text包含所有样式的div .

要删除边框,你需要从删除它.ui-input-text不是input因为它是无形的本身.

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

要删除内部阴影,您必须在JS中执行此操作.包装您的代码以pagecreate使每页生效一次.

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

演示