Option in select will be same width with the select css

Question

This question shares my problem, I tried the answer but it didn't work

#SelectBoxid {
  width:150px; 
}
 #SelectBoxid option{
   width:150px; 
}

Any way to make the option same width as select and if there is more text it can be just ...

UPDATE

Pure css as much as possible no jquery..

FIDDLE

Please show your HTML and tell us which browser you're using. — James Donnelly, Aug 04 '15 at 10:32
I am using chrome safari IE opera and firefox but i use chrome more i will update question — Brownman Revival, Aug 04 '15 at 10:35
are the options static or dynamic? if its dynamic, then you could simply use your server-side language to cut those strings.. — reuelab, Aug 04 '15 at 10:41
no it is as written there i set the defined option. The option differ from words phrases to sentences — Brownman Revival, Aug 04 '15 at 10:44
Possible duplicate - http://stackoverflow.com/questions/7289769/ellipsis-for-overflow-text-in-dropdown-boxes — Paulie_D, Aug 04 '15 at 11:02

score 0 · Answer 1 · answered Aug 14 '15 at 01:26

After doing some research, I don't think it's possible to control option's width without javascript. Its width depends on browser implementation.

There isn't a way to control this width in HTML standards. http://www.w3.org/TR/html-markup/option.html#option

And support for CSS on form controls is rather weak.

This style is useless. It doesn't control option at all. If options are all short, then options' width are the same as select even you set width to 100px. If any option is wider than select, then options' width are the same as the widest option. (at least in Chrome)

#category option {
  width:173px; // not works at all
}

Option in select will be same width with the select css

1 Answers1