Set Width of Dropdown Element in HTML Select Dropdown Options

How can change width of dropdown list?

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

Set width of dropdown element in HTML select dropdown options

You can style (albeit with some constraints) the actual items themselves with the option selector:

select, option { width: __; }

This way you are not only constraining the drop-down, but also all of its elements.

How can I set the width of HTML select element, without considering the width of each option

you should use width attribute instead of max-width.
correct your code to below sample:

<select class="form-control"style="width:150px">
    <option value="1">option 1 </option>
    <option value="2">option 2sdsdsdsd</option>
    <option value="3">option 3</option>
</select>

How do I adjust the width of a DropDown select box?

<style type="text/css">     
    select {
        width:200px;
    }
</style>

Does that not work?

Fix width of drop down menu in select option

You can use the following:

select, option { width: __; }

Keep in mind this may not work on Google Chrome. If you want a cross-browser solution you will probably have to use PHP to clip the String with SubStr. You can probably also use jQuery to set the length of the option text.

jQuery('#dropdown option').each(function() {var optionText = this.text;console.log(optionText);var newOption = optionText.substring(0,19);console.log(newOption);jQuery(this).text(newOption + '..');});

select, option {    width:150px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><table>    <tr>        <td>            <select id="dropdown" style="width:150px;">                <option value="test">123123123123123123123123123123</option>                <option value="test2">123123123123123123123123123123</option>                <option value="test3">123123123123123123123123123123</option>            </select>        </td>        <td>            <input type="text">        </td>    </tr></table>