删除输入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 开始，您可以将自定义CSS应用于input，而无需任何JS干预。创建自定义类，并使用input属性将其添加到data-wrapper-class。

自定义CSS

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

将其添加到input

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

  

<强> Demo

---

在jQuery Mobile 1.3＆amp;之前，input是不可见的，并替换为包含所有样式的div .ui-input-text。

要删除边框，您需要将其从.ui-input-text而不是input本身移除，因为它不可见。

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

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

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

  

<强> Demo

Answer 2

注意：从https://github.com/jquery/jquery-mobile/issues/7781开始，包装类将被弃用。

目前我正在使用JS

$("input").closest(".ui-input-text").addClass("no-glow");