Bootstrap 移除按钮阴影

qzlgjiam  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(8)|浏览(192)

我正在Bootstrap 3中工作,试图删除按钮的阴影/轮廓。我目前的代码只完成了部分任务。当单击按钮时,轮廓仍然会在一瞬间出现。
这是我的codepen的链接。

.btn:active,
 .btn:focus,
 .btn.active {
   background-image: none;
   outline: 0;
   -webkit-box-shadow: none;
   box-shadow: none;
 }
p1tboqfb

p1tboqfb1#

UPDATE - Boostrap 4

In this version you can remove the button shadow by using utility class shadow-none .

.btn {
  height: 100px;
  width: 100px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-3">
      <button class="btn shadow-none">No Shadow</button>
    </div>
    <div class="col-3">
      <button class="btn shadow-sm">Shadow Small</button>
    </div>
    <div class="col-3">
      <button class="btn shadow">Regular Shadow</button>
    </div>
    <div class="col-3">
      <button class="btn shadow-lg">Shadow Large</button>
    </div>    
  </div>
</div>

See more info here

OLD Answer - Bootstrap 3

You were missing this:

.btn.active.focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn:active:focus, .btn:focus {
  outline: thin dotted;
  outline-offset: -2px;
}

So you need to reset it. ( !important only used for demo - DO NOT USE in your development code)
Snippet

.container-fluid {
  text-align: center;
}
body .btn {
  height: 170px;
  width: 170px;
  border-radius: 50% !important;
  outline: 0 !important;
}
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn.focus:active,
.btn:active:focus,
.btn:focus {
  outline: 0 !important;
  outline-offset: 0  !important;
  background-image: none  !important;
  -webkit-box-shadow: none !important;
  box-shadow: none  !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <p>result</p>
  <div class="row">
    <div class="col-sm-4">
      <button class="btn">Rock</button>
    </div>
    <div class="col-sm-4">
      <button class="btn">Paper</button>
    </div>
    <div class="col-sm-4">
      <button class="btn">Scissors</button>
    </div>
  </div>
</div>
eivnm1vs

eivnm1vs2#

Bootstrap 4.1支持添加类shadow-none以删除阴影。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<p>Click both buttons below to see the difference:</p>
<button class="btn">Bootstrap button</button>
<button class="btn shadow-none">Bootstrap (4.1) button without shadow</button>
epfja78i

epfja78i3#

** Bootstrap 4**

对我来说,这就足够了:

.btn:focus{
box-shadow: none !important;
}
yvgpqqbh

yvgpqqbh4#

为此更改选择器

.btn:active,
.btn:focus,
.btn.active,
.btn:active:focus {
   background-image: none;
   outline: 0;
   -webkit-box-shadow: none;
   box-shadow: none;
}
a2mppw5e

a2mppw5e5#

添加此样式将有助于

.btn:active:focus {
  outline: 0;
}
w6mmgewl

w6mmgewl6#

放置此片段,它将被修复。

.btn:active,
.btn:focus,
.btn.active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
   outline: none !important;
}
ctehm74n

ctehm74n7#

<button class="btn btn-link currency-selector">Submit</button>
.currency-selector {
text-decoration: none !important;
}
.currency-selector:hover {
 text-decoration: none !important;
}
ffx8fchx

ffx8fchx8#

使用jquery添加 shadow-none

***shadow-none***类用于删除引导中阴影

也可以通过使用少量的jquery代码添加这个类来简化。所以你不必为每个按钮单独添加这个类。
因此,在使用此解决方案之前,必须添加jquery cdn
选择缩小版本并将其复制到您的html页面。
第一个

相关问题