設定値の後に入力フィールドが拡張されますか？

私のアプリでは、ユーザーが値を選ぶことができるフォームがほとんどなく、その値がテキスト入力フィールドに表示されます。これらの値は通常1〜3文字です。一度私の値を選ぶと、私の入力フィールドは伸びています（幅を変更しました）。入力フィールドに十分なスペースがあり（サイズは10に設定されています）、拡張する理由はありません。私は自分の値がトリムされているかどうかをチェックしていて、値とは何も変わっていません。私はこれがJQuery .val（）に関連しているかどうか、私が使っているのか、それとも別のものがあるのだろうか？ここに私のコードの例があります。設定値の後に入力フィールドが拡張されますか？

HTML：

<div class="formItem"> 
    <label for="status">Status:</label> 
    <input type="text" name="status" id="status" value="" data-master="SS_STATUS" size="10" maxlength="10" readonly /> 
    <img src="Images/add.png" alt="Click to add value" class="masterRecords" /> 
</div>

はJQuery：私はあなたの前に、ユーザーが値を選択した後、入力フィールドを見ることができる画像を添付した

//Looping through the table with the records where users choose desired code/value for their input field 
$('#searchTbl tbody tr').on('click', function(){ 
    var codeVal = $.trim($(this).find('td:eq(0)').text()); //Here I grab the value from the table 
    $('#status').val(codeVal).css('font-weight','bold'); //Here input field is populated 
});

。フィールドサイズには明らかな違いがあります。 HTML構造で何も変更されていません（値を設定した後、私の開発ツールで監視しました）。