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

Question

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

我通过为.selectbox option{width: 300px;} 赋予width 属性来尝试css，但它没有用。

有什么方法可以控制选项框的宽度。如果选项的文本换行到下一行就可以了

请看我的代码jsfiddle.net/5bt80txn

Answer 1

您可以为select 标记添加带值的宽度，然后option 将跟随。

示例： 选择{width: 320px;}

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 浏览器中不起作用！

Answer 3

你不能在选择元素中这样做。但是你可以模拟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>