更改SINGLE JQuery Mobile Input字段的宽度？

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

工作演示