文本框宽度 jQuery 移动

Question

我在 jQuery 移动设备中有标签和文本框，我正在尝试更改文本框的宽度。

出于某种原因，在我更改宽度后，假设我仍然看到 60% 的其余部分几乎是透明的。

为了更清楚，我还添加了它的照片。

这是代码：

Html:

<div role="main" class="ui-content">
        <form>
            <div class="ui-field-contain">
                 <label for="sales1">Sales:</label>
                 <input type="text" id="sales" value="">
            </div>
</form>
</div>

Css:

#sales {    
    width: 60%;   
}

如何在不看到文本框多出来的 40% 的情况下更改宽度？

Answer 1

当使用 jQuery 移动表单时，输入被包含在 div 中，宽度保持为 100%。要更改文本字段的宽度，您需要更改其父级的值，而不是从输入本身。您可以使用 jQuery:

来实现

$('#sales').parent().width($('#sales').parent().width() * .4);

以上代码将父 div 的宽度设置为其实际值的 40%。这是一个示例 fiddle：https://jsfiddle.net/qctddeza/

.width() function reference

.parent() function reference

编辑：

您只能使用 CSS 来完成此操作，但不能使用 id 选择，因为您无法获取输入元素的父元素。可以看出大致的样式here.

代码取自W3Schools。

文本框宽度 jQuery 移动

Width of text box jQuery mobile

html

css

jquery-mobile