发表新帖
发表新帖

How can change width of dropdown list?

前端 未结
关注
7 648
执念已碎
执念已碎 2020-12-04 18:46

I have a listbox and I want to decrease its width.

Here is my code:
提交评论
  •  加载中...
  • 情深已故
    2020-12-04 19:16

    Try this code:

    <select name="wgtmsr" id="wgtmsr">
<option value="kg">Kg</option>
<option value="gm">Gm</option>
<option value="pound">Pound</option>
<option value="MetricTon">Metric ton</option>
<option value="litre">Litre</option>
<option value="ounce">Ounce</option>
</select>

    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

    0 讨论(0)
  • 无人及你
    2020-12-04 19:16

    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 

    <select name="wgtmsr" id="wgtmsr" style="width: 50px !important; min-width: 50px; max-width: 50px;">
    0 讨论(0)
  • 无人共我
    2020-12-04 19:27

    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.

    0 讨论(0)
  • 梦毁少年i
    2020-12-04 19:30

    This:

    <select style="width: XXXpx;">

    XXX = Any Number

    Works great in Google Chrome v70.0.3538.110

    0 讨论(0)
  • 南旧
    2020-12-04 19:38

    This worked for me:

    ul.dropdown-menu > li {
    max-width: 144px;
}

    in Chromium and Firefox.

    0 讨论(0)
    • 1 2 下一页
     看不清?
    提交回复
    热议问题