Question

我想在我的表单中添加一个透明的bootstrap下拉列表。它是我希望透明的实际按钮，而不是单击按钮时下拉的列表。

以下是我的例子：

这是正确的，这是透明的。但偶尔当我将鼠标悬停在它上面然后从它上面盘旋时它会变成这样的蓝色：

这是我的css：

.input-control {
    height: 5rem;
    width: 49%;
    display: inline-flex;
    background-color: transparent;
    border-top-style: none;
    border-right-style: none;
    border-bottom: 1px solid dimgray;
    border-left-style: none;
    -moz-box-shadow:    none;
    -webkit-box-shadow: none;
    box-shadow:         none;
    border-radius: 0;

}

button.input-control:hover {
    background-color: none;
    background: none;
}

.btn-primary.active, .btn-primary:active, .open>.dropdown-toggle.btn-primary {
    /* color: #fff; */
    background-color: transparent;
    border-color: transparent;
}

.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover {
    color: #fff;
    background-color: transparent;
    border-color: dimgray;
}

.btn-primary:hover {
    color: #fff;
    background-color: transparent;
    border-color: dimgray;
}

dropdown > button {
    background:none;
    border:none;
    box-shadow:none;
}

HTML：

<div id="find-vegan-products-page" style="height:900px;">
        <div class="form-background">



            <form role="form" style="padding: 40px;">
                <div class="form-group">
                    <div class="dropdown">
                        <button class="btn btn-primary dropdown-toggle input-control no-box-shadow" type="button" data-toggle="dropdown">Dropdown Example
                        <span class="caret"></span></button>
                        <ul class="dropdown-menu">
                            <li><a href="#">HTML</a></li>
                            <li><a href="#">CSS</a></li>
                            <li><a href="#">JavaScript</a></li>
                        </ul>
                      </div>

                </div>
                <div class="form-group">
                    <input type="text" class="form-control input-control no-box-shadow" placeholder="City">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
        </div>
    </div>

如何阻止它变蓝？

Answer 1

尝试使用：

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    color: #fff;
    background-color: transparent;
    border-color: dimgray;
 }

Bootstrap透明下拉列表

1 个答案: