Choose the landing width of the drop-down list for the current selection

Question

Is there a non-JavaScript way (or at most a native JavaScript way) so that the width of the element selectmatches the current selection? When you click on the drop-down menu, the width of the longest will be indicated option, but it selectshould take up as much space as necessary.

I am trying to add an element selectto a line with text, so something with a fixed width, it looks ridiculous:

<p>you are currently viewing
the <select style="width:200px;"><option>Awesome</option></select>
option</p>

In the end, it looks like you are current viewing the Awesome ▼ option. I want the width to fit the selection, so it looks as smooth as you are current viewing the Awesome ▼ option.

Answer 1

, CSS-HTML-. , js jQuery, : http://jsfiddle.net/kn9DF/77/

<script>
   function setSelectWidth() {
       var sel = $('#sel');
       $('#templateOption').text( sel.val() );
       sel.width( $('#template').width() * 1.03 );
   }
</script>