html - Width of text box jQuery mobile -

i have label , text box in jquery mobile , trying change width of text box.

for reason after changing width, lets 60% still seeing rest of 40% transparent.

i adding photo of in order more clear.

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

how change width without seeing 40% of text box?

when using jquery mobile forms, inputs enclosed onto div holds width 100%. change width of text field, rather need change value of parent, not input itself. can achieve jquery:

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

the above code setting width of parent div 40% of actual value. here example fiddle: https://jsfiddle.net/qctddeza/

.width() function reference

.parent() function reference

edit:

you able css only, not selecting id, cannot parent of input element. general styling can seen here.

code taken w3schools.