更改單個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移動輸入字段的寬度？

回答

相關問題