css - How to make input type text auto-expand also set specific width expand. -

i have search field doesn't align want here code

#menu_search{     position: absolute;     width: 100%;     max-width: 1280px;     display: inline;      float: right;     right: 0px;     z-index: 99; } 

so want search in right part of screen max 1280 px, otherwise maintain alignment 1280px (center of screen)

--------------------------------1480px-----------------------------

xxxxxx----------------------1280px----------[search]xxxxxx

check jsfiddle

html

 <input id="menu_search" type="text" size="20" placeholder="search here..." />  

css

#menu_search{     position: absolute;     width: auto;     max-width: 1280px;     display: inline;      float: right;     right: 0px;     z-index: 99; } 

j-query (library 1.7.2)

$(function(){      $('#menu_search').keyup(function(){          var size = parseint($(this).attr('size'));          var chars = $(this).val().length;          if(chars >= size) $(this).attr('size', chars);      });  });