How to resize HTML Select options Drop Down box using CSS or JQuery

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 add width with a value to select tag and the option will follow.

Example: select{ width: 320px;}

Answer 2

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!

Answer 3

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>