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

正在使用 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>

然后选择你的容器，只选择CSS中该容器内的输入：

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

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

阅读你对ezanker答案的评论，如果你想让所有的输入出现在一行上，那么就需要有一个像ui-field这样包含的容器（标签也应该在那里）：

<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;
    }

demo http://jsfiddle.net/petitbarzun/cfazq5k5/1/

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

2 个答案: