jquery - jQuery jqTransform 插件输入宽度

Question

我正在使用 jqTransform 插件，但我有问题，当我添加 jqTransform 插件时，我无法更改输入宽度，如果我不使用插件一切都可以。

HTML

<div id="content">
    <form class="jqtransform">
        <div class="label">Vardas Pavarde<span class="z">*</span>:</div>
        <div class="field"><input type="text" value="Vardenis Pavardelevicius" /></div>
        <div class="clear"></div>
        <div class="label">&nbsp;</div>
        <div class="field-submit field"><input type="submit" value="Siusti" /></div>
        <div class="clear"></div>
    </form>                     
</div>

CSS

#content form .field { float: left; width: 534px; height: auto; overflow: hidden; margin: 0 0 11px 0; }
#content form .field input[type="text"] { width: 1000px; }
#content form .field textarea { width: 524px; height: 105px; }
#content form .field-submit { text-align: right; }
#content .form-done { margin: 0 0 15px 0; color: #5f2d82; }

Answer 1

您的输入被包装在divs 中，因此您必须编辑divs. 您可以通过编程方式完成，但文档本身说您应该更改他们的 CSS。

http://www.dfc-e.com/sites/theme/jscripts/vendors/jqtransformplugin/jqtransform.css

他们渲染的 HTML 看起来像这样，你可以看到jqTransformInputWrapper如果你想放大你的输入，你需要改变：

<div class="rowElem">
    <label for="inputtext"">Input Text:</label>
    <div class="jqTransformInputWrapper jqTransformSafari" style="width: 210px; ">
        <div class="jqTransformInputInner">
            <div>
               <input type="text" name="inputtext" class="jqtranformdone jqTransformInput" style="width: 226px; ">
            </div>
        </div>
    </div>
</div>

顺便说一句，有一些不错的 CSS 库，例如Twitter Bootstrap，它们以更加优雅和高效的方式完成这种类型的表单操作。

Answer 2

这对我来说很好。

 .jqTransformSelectWrapper ul{ 
 font-size:10px !important; 
  width:175px !important;} 

 .jqTransformSelectWrapper{
 width:175px !important;
 }