2

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

Hemanth Paluri
  • 363
  • 3
  • 5
  • 12
  • Possible duplicate of [How to style the option of a html "select"?](https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-a-html-select) – Manish Aug 09 '17 at 04:47
  • insert html code please! – Ehsan Aug 09 '17 at 04:57
  • @HemanthPaluri ,check my answer! – Ehsan Aug 09 '17 at 07:14
  • Why would you want that, this is a usability feature that you get for free from your browser. The size is optimised for the viewport and (touch) interface. And it does way more for you. If the select is at the bottom of your viewport, it will open the options to the top, for example. – Andy Jul 11 '22 at 18:14

4 Answers4

0

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>
Ehsan
  • 12,655
  • 3
  • 25
  • 44
  • Thanks for your response. But i'm looking for select box. – Hemanth Paluri Aug 09 '17 at 12:42
  • Please beware that this solution has usability and accessibility issues and will exclude users with disabilities. Foremost, it does not work with a keyboard. – Andy Jul 11 '22 at 18:13
0

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.

Andy
  • 4,783
  • 2
  • 26
  • 51
-1


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

Example: select{ width: 320px;}

bellabelle
  • 908
  • 7
  • 13
-1

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!

Maximilian Fixl
  • 670
  • 6
  • 23
  • I believe this only works because none of the option texts is longer than the 700px you specified. Change this to 100px and you should see that it does not work. – Andy Jul 11 '22 at 18:30