How can change width of dropdown list

Question

I have a listbox and I want to decrease its width   Here is my code    lt select name  wgtmsr  id  wgtmsr  style  width  50px   gt     lt option value  kg  gt Kg lt  option gt     lt option value  gm  gt Gm lt  option gt     lt option value  pound  gt Pound lt  option gt     lt option value  MetricTon  gt Metric ton lt  option gt     lt option value  litre  gt Litre lt  option gt     lt option value  ounce  gt Ounce lt  option gt   lt  select gt    This code works on IE 6 but not in Mozilla Firefox  latest version   Can anybody please tell me how I can decrease the width of the dropdown list on Firefox

User · Answer

This    lt select style  width  XXXpx   gt   XXX   Any Number   Works great in Google Chrome v70 0 3538 110

User · Answer

Create a css and set the value style  width 50px   in css code  Call the class of CSS in the drop down list  Then it will work

User · Answer

This worked for me   ul dropdown-menu  gt  li       max-width  144px      in Chromium and Firefox

User · Answer

The dropdown width itself cannot be set  It s width depend on the option-values  See also here   jsfiddle net LgS3C     How the select box looks like is also depending on your browser   You can build your own control or use Select2  https   select2 org

User · Answer

If you want to control the width of the list that drops down  you can do it as follows   CSS   wgtmsr option       width  50px

User · Answer

Try this code    lt select name  wgtmsr  id  wgtmsr  gt   lt option value  kg  gt Kg lt  option gt   lt option value  gm  gt Gm lt  option gt   lt option value  pound  gt Pound lt  option gt   lt option value  MetricTon  gt Metric ton lt  option gt   lt option value  litre  gt Litre lt  option gt   lt option value  ounce  gt Ounce lt  option gt   lt  select gt    CSS    wgtmsr   width 150px         If you want to change the width of the option you can do this in your css    wgtmsr option    width 150px         Maybe you have a conflict in your css rules that override the width of your select  DEMO

User · Answer

try the  important argument to make sure the CSS is not conflicting with any other styles you have specified  Also using a reset css is good before you add your own styles   select wgmstr       max-width  50px      min-width  50px      width  50px  important      or    lt select name  wgtmsr  id  wgtmsr  style  width  50px  important  min-width  50px  max-width  50px   gt

[html] How can change width of dropdown list?

Examples related to html

Examples related to css

Examples related to list

Examples related to drop-down-menu

Examples related to html-select