首页 文章

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

提问于
浏览
2

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

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

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

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

3 回答

  • 0

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

    Example: 选择{ width: 320px; }

  • 0

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

  • 0

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

    像这样:

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

相关问题