テキストボックスの幅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モバイルフォームを使用する場合、入力は幅を100％として保持するdivに囲まれます。テキストフィールドの幅を変更するには、入力自体ではなく、親の値を変更する必要があります。 あなたはjQueryを使ってこれを実現することができます

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

上記のコードは、その実際の値の40％に親のdivの幅を設定しています。ここでは例のフィドルは次のとおりです。https://jsfiddle.net/qctddeza/

.width() function reference

.parent() function reference

編集：

あなたが得ることができないとしてあなたは、CSSのみではなく、IDを選択していないが、それを行うことができるだろう入力要素の親。一般的なスタイリングはhereで見ることができます。

コードはW3Schoolsから取得しました。