CODEWITHSUNDEEP
csstwitter-bootstrap
BeniaminoBaggins
BeniaminoBaggins

Reputation: 12433

Remove (inner-box-shadow - Edited) on Bootstrap Button Click

I have a bootstrap button for a standard bootstrap dropdown. I am styling it a lot to basically remove any color and make it transparent at all times. But when I click it, it has a grey inner shadow. I would like to remove it.

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:focus,.btn:active {
   outline: none !important;
}

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

.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;
}



.form-background {
    background: rgba(149, 246, 102, .5);
}

#find-vegan-products-page {
margin-top: 100px; /*separate the div from top of the page*/
padding: 100px; /*or whatever value to give the div space */
}

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>

Example of the look of the dropdown:

enter image description here

How do I make the inner shadow go away?

EDIT: It looks a bit like an inner box-shadow that is showing in grey so the blue outline has probably fully gone away and now I need to remove the grey inner box shadow.

Upvotes: 1

Views: 10085

Answers (3)

pzworks
pzworks

Reputation: 165

.btn.btn-default:focus {
  border:none;
  outline:0;
}

Upvotes: 0

BeniaminoBaggins
BeniaminoBaggins

Reputation: 12433

The answer was not too hard once I figured out it was not the blue outline staying anymore and it was now a grey box shadow.

I just had to add: box-shadow: none; to:

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

Upvotes: 4

Dirk Jan
Dirk Jan

Reputation: 2469

Try this CSS code:

CSS

:focus { 
  outline: 0 !important;
}

Now you will never see it again. However, it is maybe not a good idea to remove it entirely.. Users who access your site and using their keyboard to 'walk' through your site never see where they are going. See this blog.

Upvotes: 0

Related Questions