Stackoverflow - How to force free CSS resize on input element when its width is specified?

http://stackoverflow.com/q/8642255/918414

by TigerAsks

HTML

<input id="text" type="text" size="1"/>
<style>
    input {
        resize: horizontal;
        width: 2px;
    }
    
    input:active {
        width: auto;   
    }
    
    input:focus {
        min-width: 200px;
    }
</style>    





























































































































































































































































































































































































































































<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-23915674-6']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

var headerUri = 'http://stackoverflow.com/q/8642255/918414',
headerCaption = 'How to force free CSS resize on input element when its width is specified?';
document.body.insertAdjacentHTML( 
'afterBegin',
  '<a href="' + headerUri + '" '
+ 'target="_top" '
+ 'onmouseover="this.style.opacity=\'.95\'" '
+ 'onmouseout="this.style.opacity=\'1\'" '
+ 'style="'
    + 'background-color: black;'
    + 'background-image: linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
    + 'background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
    + 'background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
    + 'background-image: -o-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
    + 'background-image: -ms-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255,...