CODEWITHSUNDEEP
csstwitter-bootstrapdropdown
BeniaminoBaggins
BeniaminoBaggins

Reputation: 12473

Bootstrap transparent dropdown

I would like to add a transparent bootstrap dropdown to to my form. Its is the actual button that I want to be transparent, not the list that drops down when clicking the button.

Here is an example of what I have:

enter image description here

So that is correct, that is transparent. But occasionally when I hover over it and then hover away from it it turns blue like this:

enter image description here

Here is my 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>

How do I stop it from ever turning blue?

Upvotes: 0

Views: 1604

Answers (1)

Jitesh Yadav
Jitesh Yadav

Reputation: 419

Try using:

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

Upvotes: 1

Related Questions