时间戳

首页 > 解决方案 > 以角度设置下拉选项高度

html - 以角度设置下拉选项高度

问题描述

我正在创建一个下拉列表，其中包含 20/30 值。

.select-css {
    display: block;
    font-size: 16px;
  
    color: #fff;
    padding: 10px 15px;
    width: 100%;
    max-width: 100%; 
    box-sizing: border-box;
	border-radius:20px;
    margin: 0;

    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
	border:0px;
    background-color: #8ed124;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
      linear-gradient(to bottom, #8ed124 0%,#8ed124 100%);
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
    display: none;
}
.select-css:hover {
    border-color: #fff;
}
.select-css:focus {

    outline: none;
}
.select-css option {
    font-weight:normal;
	background:#fff; color:#000; border:0; 
}
<select class="select-css" onmousedown="if(this.options.length>5){this.size=5;}"  onchange='this.size=0;' onblur="this.size=0;">
            <option value="" disabled selected>Value</option>
               <option> 1 </option>
               <option> 4 </option>
               <option> 3 </option>
               <option> 2 </option>
               <option> 5 </option>
               <option> 5 </option>
               <option> 11 </option>
               <option> 12</option>
               <option> 13</option>
               <option> 15</option>
               <option> 16</option>
               <option> 13</option>
               <option> 1 </option>
        </select>

现在，如果您运行代码，它将立即显示整个项目值。我想设置下拉菜单的高度，以便它只能显示 5 个值，其余的，我们可以向下滚动。

我尝试使用 max-height 选项，但它不起作用。

//现在更新 我尝试了解决方案，但它将背景颜色设为绿色，直到我想要删除的长度。

同样在下拉列表之后，我有另一个部门，因此下拉列表正在重新定位 div。我不知道为什么有人可以提出建议

标签： htmlangular

解决方案

我无法抗拒（这是一个“怪诞”的想法）基于引导程序

<div class="container">
    <div style="position:relative">
        <div class="drop-down w-100">
            <input class="form-control" [class.rounded-top]="focus"
             [formControl]="control" (focus)="onFocus(select)" >
        </div>
            <select #select
      class="form-control rounded-0 select" 
      size="5"
      [style.visibility]="focus?'visible':'hidden'" 
      [ngModel]="control.value" 
      (ngModelChange)="control.setValue($event)" 
      (click)="focus=false" 
      (blur)="focus=false" 
      (keydown.enter)="focus=false" >
         <option *ngFor="let i of [0,1,2,3,4,5,6,7,8,9,10]">{{i}}</option>
      </select>
</div>

.select
{
  position:absolute;
  outline:none;
  box-shadow:none;
  border-color:silver; 
}
.drop-down{
  position: relative;
  display: inline-block;
}
.drop-down:after{
  position:absolute;
  top:1rem;
  right: 1rem;
  display: inline-block;
  margin-left: .255em;
  vertical-align: .255em;
  content: "";
  border-top: .3em solid;
  border-right: .3em solid transparent;
  border-bottom: 0;
  border-left: .3em solid transparent;
  }
.rounded-top
{
  border-bottom-left-radius: 0!important;
  border-bottom-right-radius: 0!important
}

参见stackblitz

推荐阅读