文本框的寬度jQuery手機

Question

我有jQuery手機中的標籤和文本框，我試圖改變文本框的寬度。

出於某種原因，我改變寬度後，讓我們說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。