如何在下拉链接上应用 Bootstrap 4 选择样式，例如：a 标签

Posted 2023-05-08

【中文标题】如何在下拉链接上应用 Bootstrap 4 选择样式，例如：a 标签

【英文标题】：How to apply Bootstrap 4 select styling on dropdown links eg: a tags

【发布时间】：2021-11-05 13:20:06

【问题描述】：

我想要的： 将引导程序 4 表单样式（例如 form-control、custom-select）应用于实际链接（下拉标签）

像这样：

<select class="custom-select" onchange="location = this.value;">
        <option selected>Choose a website</option>
        <option value="google.com">google</option>
        <option value="apple.com">apple</option>
        <option value="amazon.com">amazon</option>
</select>

样式是完美的，它可以按预期工作，但它不是实际的链接，我真正想要的是它是实际的链接，但具有选择样式，A 标记，如下所示：

<select class="custom-select"> # or class = form-control
        <a href>Choose a website</a> # same styling as options but acutal links
        <a href="google.com">google</a>
        <a href="apple.com">apple</a>
        <a href="amazon.com">amazon</a>
</select>

我确实找到了一种方法，但它滞后于页面并且不那么干净，这是我的做法：

<div>
     <a href="#ChooseWeb" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle form-control">Choose a website</a>
           <style>
                 .form-control
                  height: auto;
                 
           </style>
                        <ul class="collapse list-unstyled form-control" id="ChooseWeb">
                            <li>
                                <a href="#">google</a>
                            </li>
                            <li>
                                <a href="#">neflix</a>
                            </li>
                            <li>
                                <a href="#">apple</a>
                            </li>
                            <li>
                                <a href="#">amazon</a>
                            </li>
                        </ul>
</div>

最干净的方法是什么？

【问题讨论】：

这有帮助吗：getbootstrap.com/docs/4.6/components/dropdowns/#single-button ?

我试过了，没用，这是一个带有按钮样式的标签下拉列表，我想要的是带有表单选择样式的标签下拉列表，例如“自定义选择”或“表单控件” "

我不确定我是否完全理解您的问题（带有所有 a 标签 :)），但我正在尽力而为。在我发送给您的链接中，如果您向下滚动一点，您会找到另一种使用a 标签进行下拉的方法（您可以在页面中找到“And with elements:”），然后您可以根据自己的喜好更改 a 样式

我认为它不起作用，愿意分享一个sn-p吗？

jsfiddle.net/eyxs3a9j/12

【参考方案1】：

要仅使用 a 标记进行下拉，请使用带有“<a> 元素”的引导程序“Dropdown single button”组件。 现在让它看起来像 bootstrap .custom-select 类，只需复制该类 (.custom-select) 的 bootstrap css 样式并将其调整为您刚刚创建的下拉列表，如下所示：

https://jsfiddle.net/5nwjmt9h/1/

这是.custom-select 的引导 css 样式：

.custom-select 
   display: inline-block;
   width: 100%;
   height: calc(1.5em + .75rem + 2px);
   padding: .375rem 1.75rem .375rem .75rem;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   color: #495057;
   vertical-align: middle;
   background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right .75rem center/8px 10px no-repeat;
   border: 1px solid #ced4da;
   border-radius: .25rem;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;