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。

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

1 个答案: