Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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>
like image 372
Niusha Ghanbari Avatar asked Oct 28 '18 12:10

Niusha Ghanbari


People also ask

How to set the width of the element in HTML?

Set the width of the element in HTML. Use the width attribute in HTML to set the width of an element. You can use the attribute with the following elements: <canvas>, <embed>, <img>, <input>, <video>, etc. You can try to run the following code to implement width attribute in HTML:

How do we set the type of an element in HTML?

How do we set the type of element in HTML? Use the width attribute in HTML to set the width of an element. You can use the attribute with the following elements − <canvas>, <embed>, <img>, <input>, <video>, etc. You can try to run the following code to implement width attribute in HTML −

What is the use of width in CSS?

CSS width property lets you specify the width of input elements in various CSS units such as px, em, rem, etc. Also, it is not dependent on the size of the fonts. If you want to apply the same width to multiple inputs, you can use CSS attribute selectors to select the desired ones.

How do I use the width attribute for input elements?

Note: For input elements, the width attribute is used only with <input type="image">. The width attribute can be used on the following elements: Your browser does not support the video tag.


1 Answers

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>
like image 53
Sheida Mohassesi Avatar answered Oct 04 '22 23:10

Sheida Mohassesi