如何根据文本大小更改我的css下拉列表以更改大小？

Question

    .dropdown select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
    
      color: blue;
      font-weight: bold;
      text-decoration: underline;
      font-size: 20px;
      line-height: 1.75;
    
      display:inline-block;

      background-color: #ffffff;
      background-image: none;
      border-style: none;
    
      background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat right;
    }

<div class="col-md-8 offset-md-2">
          <span class="header"> COMPARE </span>
          <span class="dropdown">
               <select class="select_box" id="opts">
                	<p></p>
                	<option value="default">Select a dataset</option>
                	<option value="population">POPULATION</option>
                	<option value="popdensityperacre">POPULATION DENSITY</option>
                	<option value="percapitaincome">INCOME</option>
                    <option value="percentnonwhite">RACIAL DIVERSITY</option>
                    <option value="percentinpoverty">POVERTY</option>
                    <option value="medianhomevalue">HOME VALUE</option>
                    <option value="unemploymentrate">UNEMPLOYMENT</option>
                    <option value="percapitacriminalarrests">CRIME</option>
                    <option value="percapitaencampments">HOMELESSNESS</option>
                    <option value="medianhoursofsummerfog">FOG</option>
                    <option value="percentinliquefaction">LIQUEFACTION</option>
                </select>
          </span>
          <span class="header"> BY NEIGHBORHOOD </span>
      </div>

我如何获得它，以便盒子根据选择的选择改变大小？我认为如果我把它变成inline-block然后将宽度设置为100％可能会有效。

我希望盒子大小改变的原因是我希望下拉箭头位于文本旁边，而不是停留在固定位置。

Answer 1

因此，如果我做对了，解决方案就是将一些:hover css添加到一个类中。 看看w3school上的这个例子：https://www.w3schools.com/howto/howto_custom_select.asp

我点击了“自己试试”并改变了我认为你想要的代码。 使用以下css代码，您可以在悬停它时根据需要更改div选项。

.select-items div:hover {   
    background-color: rgba(0, 0, 0, 0.1);
    height: 50px; 
}

希望它有所帮助。

探索更多内容的示例，他们对选择菜单的所有部分都有css。