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

问题描述

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

How can I quit the borders of a input in 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>

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

推荐答案

从 jQuery Mobile 1.4 开始，您可以将自定义 CSS 应用到 input 而无需任何 JS 干预.创建自定义类并使用 data-wrapper-class 属性将其添加到 input.

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

自定义 CSS

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

添加到input

  
Demo

<块引用>

演示

<小时>

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

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

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

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

要去除内阴影，您必须在 JS 中进行.将您的代码包装在 pagecreate 中，以便每页生效一次.

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

<块引用>

演示

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