Question

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

我通过为width提供.selectbox option{width: 300px;}属性尝试了css但是它没有用。

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

，则没问题

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

Answer 1

您无法在选择元素中执行此操作。但您可以模拟select元素。

像这样：

＆＃13;

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

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

Answer 2

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

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

Answer 3

您必须使用文档对象模型选择器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浏览器中不起作用！

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

3 个答案:

HTML

CSS

注意：