Breite des Textfelds jQuery mobile

Question

Ich habe Label und Textfeld in jQuery Mobile und ich versuche, die Breite des Textfelds zu ändern.

Aus irgendeinem Grund, nachdem ich die Breite ändere, sagen wir für 60% ich sehe immer noch den Rest der 40% fast transparent.

Ich füge auch ein Foto davon, um mehr klar zu sein.

Dies ist der Code:

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%; 
} 

Wie kann ich die Breite ändern, ohne die zusätzlichen 40% der Sehende Textfeld?

Answer 1

Bei der Verwendung von mobilen jQuery-Formularen sind die Eingaben in ein div eingeschlossen, das die Breite als 100% enthält. Um die Breite Ihres Textfelds zu ändern, müssen Sie lieber den Wert des übergeordneten Elements ändern, nicht die Eingabe selbst. Sie können dies mit jQuery erreichen:

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

Der obige Code wird die Breite des übergeordneten div bis 40% seines tatsächlichen Wertes. Hier ist ein Beispiel Geige: https://jsfiddle.net/qctddeza/

.width() function reference

.parent() function reference

Edit:

Sie wäre in der Lage es mit CSS nur zu tun, aber nicht mit einem id-Auswahl, da Sie nicht das bekommen Eltern des Eingabeelements. Ein allgemeines Styling kann gesehen werden here.

Code entnommen aus W3Schools.