文本框jQuery mobile的宽度

Question

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

由于某些原因我改变宽度之后，让我们说60％，我仍然看到40％的其余部分几乎透明。

我还要添加一张照片以便更清楚。

这是代码：

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上，该div保持宽度为100％。要更改文本字段的宽度，您需要更改其父级的值，而不是更改输入本身的值。 你可以用jQuery来实现这个目的：

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

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

.width() function reference

.parent() function reference

编辑：

您只能使用CSS，但不能使用id进行选择，因为您无法获取输入元素的父级。可以看到一般样式here。

代码取自W3Schools。