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

关于这个问题的另外两个答案提出了压倒一切的 div.ui输入文本{}更改单个JQuery移动输入字段的宽度？

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

如何修改单个文本输入？

输入标签中的类别名称不起作用。如果我用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- *类来解决这个问题。

在此先感谢。

来源

2015-05-14 Michael Barber

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

来源

2015-05-14 22:22:21 ezanker

这看起来不错！然而，我这样做的主要原因是我试图让Icon基本显示在输入文本的末尾，并自动执行换行符。这个想法是保持gui与文本输入保持一致，并在最后“全部减去”图标。显示：内联也不起作用。 –

@MichaelBarber，如果你只是想要按钮的权利，你可以添加一个float：left到地址类。如果你想输入自动填充宽度减去按钮，一个表适用于此：http://jsfiddle.net/ezanker/an22axex/3/ – ezanker

好吧，我不能去你的jsfiddle链接，它只是挂起。尽管如此，桌子还是有意义的。然而，我被告知我们，因为设计师们想要停止使用表格进行定位，并且只对网格数据使用表格，所以从未考虑过。 –

它也许有点晚了回答这个问题，但也许其他人看同样的事情（我:-) 你可以把你的地址，一个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>

然后选择你的容器，只是在CS中的容器内的输入S：

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

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

阅读从ezanker回答您的意见，如果你想全部投入到出现在同一行，需要有与容器UI场，包含如下这个（标签应该有太）：

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

来源

2015-11-26 18:48:31

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

回答

相关问题