After spending a considerable amount of time working on this since it was first posted, I am pleased to say that I have gained valuable knowledge - thank you.
I have thoroughly examined the Amazon code multiple times and discovered that they have incorporated the option within a span element. Despite my efforts using F12 tools, I have been unable to decipher all the styling applied to these elements.
Returning to basics, I recalled that one common method to achieve variable width is by utilizing a "span" tag - hence, I placed the selected text inside a span.
Furthermore, I found that performing advanced styling on an option element is extremely challenging, if not impossible. Therefore, the option element serves solely for selection purposes - it is added to the div when required and removed afterwards.
For reference, you can view the FIDDLE.
JS
$myoption = "<select class='myselect'><option>selection</option><option>Small</option> <option>Medium</option><option>Laaaaarge</option><option>Really Looooong</option></select>";
$('.bigdiv').on('click', function(){
if( $('.bigdiv > .myselect' ).length > 0 )
{
return;
}
else
{
$('.bigdiv').append($myoption);
console.log('appended');
}
});
$( document ).on('change','.myselect', function(){
console.log('change');
var myselection = $('.myselect').val();
console.log('Selection =' + myselection);
$('.myspan').html( myselection );
$('.myselect').remove();
});
$('.remove').on('click', function(){
$('.myselect').remove();
});
The developers at Amazon certainly showcase creativity and expertise in their work. It would be fantastic if one of them could provide us with some guidance without revealing any confidential information or trade secrets!