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

Question

我有一个选择框，当我单击选择框时，它会显示选项，但下拉框的宽度超过了选择框的宽度。如何控制下拉框的宽度和高度。使用CSS或JQuery。

我尝试过通过为.selectbox option{width: 300px;}提供width属性来使用css，但它不起作用。

有什么办法可以控制选项框的宽度吗？如果选项的文本换行到下一行，则可以

请参阅我的代码jsfiddle.net/5bt80txn

Answer 1

你不能在

elements.but中这样做，你可以模拟select元素。

如下所示：

​

$(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

您必须使用文档对象模型选择器option选择器，或者为每个option分配一个类并设置它们的样式。这个解决方案对我很有效：

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*/ 

}

注意：

这在webkit浏览器中不起作用！