刪除輸入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干預。創建一個自定義類並使用data-wrapper-class屬性將其添加到input。

自定義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 &中，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");