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: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>

下拉列表的外观示例：

如何让内阴影消失？

编辑：它看起来有点像内部阴影，显示为灰色，因此蓝色轮廓可能已完全消失，现在我需要移除灰色内框阴影。

Answer 1

一旦我发现它不再是蓝色轮廓而且它现在是一个灰色的盒子阴影，答案并不太难。

我只需要将box-shadow: none;添加到：

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

Answer 2

试试这个CSS代码：

<强> CSS

:focus { 
  outline: 0 !important;
}

现在你再也见不到了。但是，完全删除它可能不是一个好主意..访问您的网站并使用键盘来“走”的用户。通过您的网站永远不会看到他们的去向。请参阅此blog。

Answer 3

＆＃13;

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

＆＃13;

在Bootstrap按钮上删除（内部阴影 - 编辑）单击

3 个答案: