如何在數據列表下拉菜單中提供滾動效果？

我正在使用HTML數據列表顯示各種職業路徑，但我的選項數量太長。我希望給它一個滾動效果。我已經搜索了它，但只有我發現的東西是CSS不能應用在datalist上。是否有可能使用jQuery在datalist上應用樣式？如何在數據列表下拉菜單中提供滾動效果？

這裏是我的HTML標記：

<input class="form-control searchbar" #input (input)="filterdata(input.value)" [(ngModel)]="homesearch" id="home_ssearch" name="careerr" list="careers" placeholder="Discover more about any career you like" /> 
<div> 
     <datalist class="datalist" id="careers" > 
      <option *ngFor = "let career of carrerpathList" value="{{career.title}}" ></option>   
     </datalist> 
</div>

來源

2017-04-19 Utkarsh Gautam

試試這個

.scrollable { 
    overflow-y: auto !important; // Use !important only if there is already an overflow style rule for this element and you want to override 
}

而就應用它是這樣的：

<datalist class="datalist scrollable" id="careers" > 
    <option *ngFor = "let career of carrerpathList" value="{{career.title}}" ></option>   
</datalist>

希望它能幫助！ ;）

更新1：

我恨內嵌樣式，但是讓我們嘗試一下，看看是否<datalist>接受的風格。試試這個：

<datalist class="datalist scrollable" id="careers" style="overflow-y: auto!important">

來源

2017-04-19 09:38:52 SrAxi

我試過，但CSS dosent似乎都影響它。 –

@UtkarshGautam我更新了。讓我們試試看看它是如何發展的。讓我知道它是否得到了這種風格。 – SrAxi

它仍然無法正常工作。 –

試試這個：

.datalist { 
    height:50px !important; 
    max-height:80px !important; 
    overflow-y:auto; 
    display:block !important; 
}

來源

2017-04-19 10:12:15 sravanthi

它看起來好像最初下拉式加載它需要的高度，但然後溢出。 –

datalist的初始高度爲80px。如果選項太長，滾動將被啓用。 – sravanthi

它不是除了我嘗試給的任何CSS。 –

如何在數據列表下拉菜單中提供滾動效果？

回答

相關問題