jquery-mobile - 更改单个 JQuery 移动输入字段的宽度？

Question

关于这个问题的其他两个答案建议覆盖div.ui-input-text {}

但是，我在此页面以及我的项目中有多个输入字段。所以这些答案不会起作用，因为它们会影响我的页面或项目上的所有内容。

如何修改单个文本输入？

输入标签中的类指定不起作用。如果我用 div 标签封装输入，它仍然不起作用。我试图在最后放一个图标，但似乎所有 Jquery 移动文本输入都占据了整个屏幕。

<input class="address" type="text" name="address" id="basic"
placeholder="Street Address, City, State" />
<input type="button" value="FindMe" data-icon="eye" data-iconpos="notext">

CSS, No Effect!
.address {
width: 200px !important;
}

现在，如果这是继续这个项目的更好方法，我仍然可以切换到 Bootstrap。似乎有 .col-xs-* 类可以解决这个问题。

提前致谢。

Answer 1

jQM 没有直接在输入上设置类，而是为输入提供了一个数据属性，称为 data-wrapper-class (api doc: http://api.jquerymobile.com/textinput/#option-wrapperClass )。这允许您将一个类直接应用到 jQM 在增强文本框时添加的最外层包装 DIV。

<input data-wrapper-class="address" type="text" name="address" id="basic"
placeholder="Street Address, City, State" />

Working DEMO