如何使用 CSS 或 JQuery 调整 HTML 选择选项下拉框的大小

Question

I am having an select box when i click on the select box it is displaying options but the drop down box width is exceeding the width of the select box. How to controle the width and height of that drop down box. using CSS or JQuery.

I have tried css by giving width attribute for .selectbox option{width: 300px;} But it did not worked.

is there any way that i can control the width of the option box. it is ok if the text of the option wraps to the next line

Please see my code jsfiddle.net/5bt80txn

Answer 1

You can't do it in select elements.but you can simulation select element.

Like this:

 $(document).ready(function(){ $('.txt,span').click(function(){ $('ul').toggle(); }) $('li').click(function(){ var text = $(this).html(); $('.txt').html(text); $('ul').hide(); }) })

 * { box-sizing: border-box; } .wrapper { width : 100px; position: relative; border: 1px solid #CCC; cursor: pointer; } .txt { width: 90%; height: 20px; padding: 0 10px 0 0; white-space: nowrap; overflow: hidden; } ul { padding: 0; position: absolute; list-style: none; border: 1px solid #CCC; margin-top: 0; display: none; z-index: 100; } li:nth-child(odd) { background-color: #CCC; } span { position: absolute; right: 0; z-index: 200; top: 0; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="wrapper"> <div class="txt"></div><span>▾</span> <ul> <li>Welcome</li> <li>Welcome to New World</li> <li>Welcome to my new World of Dreams</li> <li>Yes,Working!</li> </ul> </div>

Answer 2

No there is no way to control that aspect of <option> elements.

As per MDN on the <option> element :

Styling the <option> element is highly limited. Options don't inherit the font set on the parent. In Firefox, only color and background-color can be set however in Chrome or Safari it's not possible to set any properties. You can find more details about styling in our guide to advanced form styling.

You could replace the native <select> with a custom one, which allows styling, but be careful: You will use a lot of usability and accessibility features.

Warning of custom select menus

The browser is optimising the size of the options based on viewport size already, making sure the options have the proper touch target size and providing a native interface on mobile platforms. It's even placing the whole menu depending on the menu's current scroll position on the viewport, opening it to the top if the menu is on the bottom.

And last but not least, it is very accessible, it works with all kinds of user input devices (touch, keyboard, mouse, joystick, voice control), and works for screen reader users.

So, if you decide that having the option-menu the same width as the select element is very important, you should at least try to find a library that provides above mentioned features as well.

Answer 3

You can add width with a value to select tag and the option will follow.

select{ width: 320px; }

Answer 4

You have to use the document object model selector option selector or give each option a class and style them. That solution worked for me:

HTML

<select id="sel">
    <option>Option one</option>
    <option>Option two</option>
    <option>Option three</option>
</select>

CSS

#sel{
    width: 300px;
    height: 40px;
}

/*700px width for example*/

#sel option {
    width: 700px; /*default would be inherit*/
    height: 60px; /*just changed for example*/ 

}

NOTE:

This will not work in webkit browsers!