css 带图标的引导程序下拉选择

yx2lnoni 于 2022-11-19 发布在其他

关注(0)|答案(2)|浏览(174)

我有一个引导程序选择下拉菜单，我需要在其中显示图标，如下图所示

<!DOCTYPE html>
<html>
<html>

<head>
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0">

    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>
<div class="input-group mb-3">
  <select class="form-select" id="inputGroupSelect03" aria-label="Example select with button addon">
  <img src="https://img.icons8.com/offices/30/null/form.png"/>
    <option selected>Choose...</option>
  <img src="https://img.icons8.com/offices/30/null/form.png"/>    
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>
</body>

</html>

css

来源：https://stackoverflow.com/questions/74485497/bootstrap-dropdown-select-with-icons

2条答案

按热度按时间

r7knjye21#

这里有一个例子如何做到这一点，你可以使用css的技巧来修改下拉按钮，看起来像选择，和下拉菜单，你可以固定最大高度，并允许溢出滚动，它将作为选择为您。
我已经添加了jquery和little css，并修正了你的html的一小部分。我已经使用属性把图像放在选项中，然后通过jquery在下拉列表菜单项中呈现它。
代码中也有注解（我希望你能从中学到一些东西）。
也有许多插件，有可能做你需要的，甚至mroe然后。
第一个

赞(0）回复(0）举报 2022-11-19

6jygbczu2#

您应该将select标记更改为无序列表，创建一个锚标记，并将icon标记放入a标记中，这样它才能正常工作

赞(0）回复(0）举报 2022-11-19