How to change the width of option box (independet of select width) with jquery?

Question

How could I set the width of option box different than select width?

what I tried:

$('option').css({'width': 100});

and the select hast to be:

select{
width:400px;
}

Fiddle: http://jsfiddle.net/7k8He/1/

Option text wants to be shorter but option box not..Is it possible to change that dynamically

Thanx in advance!

Answer 1

You can't set the width for the option element. The browser will automatically make all the options the width of the longest option.

Answer 2

You can use the 'css' selector like this:

$('option').css({'width','100px'});

or set it with the width selector like this:

$('option').width(100);

https://api.jquery.com/width/

Answer 3

You should wright $('select option').css('width','250'); like this syntax is bit wrong

Demo

if you want to set multiple properties you can use something like $('select option').css({"border":"1px solid red", "height":35});

Hope it helps!