我想在引導選擇中添加一些圖示，如下所示：
我試過的：
<select class="form-select" aria-label="Filter select">
<option data-icon="bi bi-funnel-fill" selected>Filter</option>
<option value="1">All</option>
<option value="2">Active</option>
<option value="3">Inactive</option>
</select>
我嘗試使用data-icon（正如我在一些 stackoverflow 答案中看到的那樣），但它對我不起作用。
我想知道對于 bootstrap 5 是否還有另一種方法可以得到這個結果，或者我做錯了什么。
歡迎任何幫助。
現場 JS 小提琴演示
uj5u.com熱心網友回復：
該<option>標簽的唯一允許的內容是：
文本，可能帶有轉義字符（如
é）。
所以它可能只是被瀏覽器忽略了。當我嘗試在 Chrome 中檢查元素時，<option selected><i ></i> Filter</option>該<i>標簽甚至沒有出現。
您可以使用輸入組或嘗試找到合適的 UTF 字符。
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet" crossorigin="anonymous">
<div class="input-group">
<label class="input-group-text" for=""><i class="bi bi-funnel"></i></label>
<select class="form-select" aria-label="Filter select">
<option selected><i class="bi bi-funnel"></i> Filter</option>
<option value="1">All</option>
<option value="2">Active</option>
<option value="3">Inactive</option>
</select>
</div>
<!-- OR -->
<select class="form-select" aria-label="Filter select">
<option selected>⧩ Filter</option>
<option value="1">All</option>
<option value="2">Active</option>
<option value="3">Inactive</option>
</select>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/354016.html
標籤：推特引导 bootstrap-5
上一篇：如何將多個圖形和控制元件與Highcharts的一個范圍選擇器結合起來？
下一篇：使引導選擇串列透明