word testing

by lovromar

HTML

Svoju kavu najviše volim piti
<select>
     <option>.....</option>
 <option>ujutro prije posla</option>
 <option>popodne nakon ručkac</option>
 <option>pauza nakon ručka</option>
</select>
<span class="width_tmp"></span> and lorem ipsum somet at ea
<select>
     <option>.....</option>
 <option>All</option>
 <option>Longer</option>
 <option>A very very long string...</option>
</select>
<span class="width_tmp"></span>

CSS

body {
    font-size:20px;
}

select {
width:45px;
    background-color:transparent;
    border:0;
    border-bottom:1px dotted red;
   
    
    -webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-indent: 0.01px;
text-overflow: '';
background: transparent url(arrow.png) no-repeat center right;
    
    
    /*
     -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: ''; */
}

select {
    font-size:20px;
}

.width_tmp{
 display : none;
}

JavaScript

$(document).ready(function() {
 $('select').change(function(){
    $(".width_tmp").html($('select option:selected').text());
    $(this).width($(".width_tmp").width())+32; // 30 : the size of the down arrow of the select box 
 });
});