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

Question

这个问题的其他两个答案建议覆盖 div.ui-输入文本{}

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

如何修改单个文本输入？

输入标签中的 class 指定不起作用。如果我用 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-* classes 可以解决这个问题。

提前致谢。

Answer 1

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

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

Working DEMO

Answer 2

现在回答这个问题可能有点晚了，但也许对于其他正在寻找同样东西的人来说（我是:-）你可以把你的地址放在 div:

<div class="myContainer">
    <label id="lbAddress">Provide the address</label>
    <input class="address" type="text" name="address" id="address" />
    <input class="address" type="text" name="Street" id="Street" />
    <input class="address" type="text" name="City" id="City" />
    <input type="button" value="FindMe" data-icon="eye" data-iconpos="notext">
</div>
<div><input class="other" type="text" name="other" id="other"/></div>

然后 select 你的容器和 CSS 中那个容器内的输入：

.myContainer  > .ui-input-text
    {
        width:200px;
    }

演示：https://jsfiddle.net/petitbarzun/cfazq5k5/

阅读您对 ezanker 答案的评论，如果您希望所有输入都显示在一行中，则需要有一个带有 ui-field-contain 的容器，如下所示（标签应该在那里太）：

<div class="ui-field-contain">
    <label id="lbAddress" style="display:none"></label>
    <input class="address" type="text" name="address" id="address" />
    <input class="address" type="text" name="Street" id="Street" />
    <input class="address" type="text" name="City" id="City" />
    <input type="button" value="FindMe" data-icon="eye" data-iconpos="notext">
</div>
<div><input class="other" type="text" name="other" id="other"/></div>

然后 CSS 看起来像这样：

.ui-field-contain  > #lbAddress~[class*=ui-input-text]
    {
        width:219px;
    }

演示 http://jsfiddle.net/petitbarzun/cfazq5k5/1/

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

Change the width of a SINGLE JQuery Mobile Input field?

jquery-mobile