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

Question

Actually I know the select box width is set by the longest option in the list, but I want to increase the length (width) of a select html element.

I also searched and I understand this code style="max-width:70%" may work but it doesn't work for me.

The code below is mine:

<select class="form-control"style="max-width:70%">
    <option value="1">option 1 </option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
</select>

Answer 1

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>