önyükleme düğmesi, tıklandığında mavi anahat gösterir

Bunu ekledim, ancak düğme tıklandığında hala mavi çerçeve görünüyor.

.btn:focus {
  outline: none;
}

bu çirkin şey nasıl kaldırılır?

Mallarınız geçersiz kılınmış olabilir. !importantAktif ile birlikte kodunuza eklemeyi deneyin .

.btn:focus,.btn:active {
   outline: none !important;
   box-shadow: none;
}

Ayrıca kutu gölgesi ekleyin, çünkü aksi halde düğmenin etrafındaki gölgeyi yine de göreceksiniz.

Bu, kullanmak için iyi bir uygulama olmasa da! Önemli Daha spesifik bir sınıf kullanmanızı ve sonra css'yi! Önemli ... kullanarak uygulamayı denemenizi öneririm.

Bootstrap'in en son sürümünde, anahatları kaldırmanın çalışmadığını buldum. Ve bunu eklemem gerekiyor çünkü bir kutu gölgesi de var:

.btn:focus, .btn:active {
  outline: none !important;
  box-shadow: none !important;
}

Devre shadow-nonedışı bırakmak box-shadow(değil outline) için yerleşik bir boostrap sınıfı vardır ( https://getbootstrap.com/docs/4.1/utilities/shadows/ ). Bu, düğmenin gölgesini kaldırır:

<button class='btn btn-primary shadow-none'>Example button</button>

Kodun Altını Deneyin

.button:active, 
 button:active,
.button:focus, 
 button:focus,
.button:hover, 
 button:hover{
    border:none !important;
    outline:none !important;
}

Bu bana Chrome'da oluyordu (Firefox'ta olmasa da). outlineÖzelliğin Bootstrap tarafından olarak ayarlandığını öğrendim outline: 5px auto -webkit-focus-ring-color;. outlineÖzel CSS'mde aşağıdaki gibi özelliği geçersiz kılarak çözüldü :

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

bu, düğmeyi metinle çözecektir, yalnızca düğme bir simge veya düğme bir bağlantıdır:

 <!--1. button with a text -->
 <button type="button" class="btn btn-success" id="newWord">Save</button>

 <!--2. button only with a close icon -->
 <button type="button" class="close"></button>

 <!--3. button is a link -->
 <a class="btn btn-success btn-xs" href="#">Save</a>



button,
button:active,
button:focus, 
button:hover,
.btn,
.btn:active, 
.btn:focus, 
.btn:hover{   
    outline:none !important;
}

eklersen border:none !important;

{
    border:none !important;
    outline:none !important;
}

tıklandığında düğme boyutu küçülecektir.

Bunu dene

.btn
{
    box-shadow: none;
    outline: none;
}

Bootstrap 4'te kullanıyorlar box-shadow: 0 0 0 0px rgba(0,123,255,0);: odaklanma, sorunumu çözdüm

a.active.focus,
a.active:focus,
a.focus,
a:active.focus,
a:active:focus,
a:focus,
button.active.focus,
button.active:focus,
button.focus,
button:active.focus,
button:active:focus,
button:focus,
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
    outline: 0;
    outline-color: transparent;
    outline-width: 0;
    outline-style: none;
    box-shadow: 0 0 0 0 rgba(0,123,255,0);
}

Birisi hala bu soruyu çözmemişse bu yardımcı olabilir.

(function() {
  $('button').on('click', function() {
    $("#action").html("button was clicked");
    console.log("the button was clicked");
  });
})();

.btn-clear {
  background-color: transparent !important;
  border-style: none !important;
  cursor: pointer;
}

.btn-clear:active,
.btn-clear:focus {
  outline-style: none !important;
  outline-color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- this button has default style -->
<button>Action</button>
<!-- this button is clear of style -->
<button class="btn-clear">Action</button>

<label id="action"></label>

Değerini 0 olarak ayarlayarak düğmeden dış çizgiyi çıkardıktan sonra bile, düğmenin üzerinde hala komik bir davranış var, boyutu biraz küçülüyor. Bu yüzden optimal bir çözüm buldum:

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

Bu yardımcı olur umarım...

Düzgün yerleştirmeyi kullanmanız ve ardından ona stil uygulamanız gerekir.

• Düğmeye sağ tıklayın ve (firefox için firebug kullanarak elementi inceleyin), (elementi krom için inceleyin) kullanarak onun için tam sınıf iç içe geçmesini bulun.

• Tüm sınıfa stil katın. Ancak o zaman işe yarardı

Düğmeye tıkladıktan sonra bunu benim durumumda oldukça faydalı buldum.

$('#buttonId').blur();

Sadece kenarlık genişliğini kaldırmayı seçtim :focus. Bu, anahat ile düğmenin yuvarlak köşeleri arasındaki çirkin boşluğu kaldırır. Bazı nedenlerden dolayı bu sorun yalnızca gerçek düğme öğelerinde olur, öğelerde olmaz <a class="btn">.

button.btn:focus {
  border-width: 0;
}

İşte düğme ana hatlarını kaldırmak için Boostrap 4 çözümüm

/*
* Boostrap 4
* Remove blue outline from button
*/

.btn:focus,
.btn:active {
  box-shadow: none;
}

Aynı sorunu yaşadım ve aşağıdaki kod benim için çalıştı:

.btn:active, .btn:focus, .btn:active:focus, .btn.active:focus {
    outline: none !important;
}

.btn {
  margin:32px;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->




<button type="button" class="btn btn-default">Button</button>

Yardımcı olacağını umuyoruz!

Aslında önyüklemede tüm durumlar için tüm değişkenler tanımlanır. Sizin durumunuzda, '_variables.scss' dosyasındaki '$ input-btn-focus-box-shadow' varsayılan değişkenini geçersiz kılmanız yeterlidir. Böylece gibi: $input-btn-focus-box-shadow: none; Not Kendi özel '_yourCusomVarsFile.scss' bu değişken geçersiz kılmak gerektiğini. Ve bu dosya ilk sırada projede içe aktarılmalı ve ardından şu şekilde önyükleme yapılmalıdır:

@import "yourCusomVarsFile";
@import "bootstrap/scss/bootstrap";
@import "someOther";

Önyükleme değişkenleri bayrak '! Default' ile birlikte gelir.

$input-focus-box-shadow: $input-btn-focus-box-shadow !default;

Yani dosyanızda varsayılan değerleri geçersiz kılacaksınız. İşte örnek:

$input-focus-box-shadow: none;
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;

İlk değişken, ikincisinden daha fazla önceliğe sahiptir. Aynısı diğer durumlar ve durumlar için de geçerlidir. Umarım size yardımcı olur.

İşte önyüklemeden tüm başlangıç ​​değerlerini bulabileceğiniz repodan '_variable.scss' dosyası: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss

Chears

a:focus {
  outline: none;
}

bu benim için BS3'te çalışıyor

Bu benim için Bootstrap 4'te çalıştı:

.btn {border-color: transparent;}

Deneyin

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

Unutmayın, eğer düğme aşağıdaki gibi bir bağlantının içindeyse:

<a href='some_link'>
    <button class='btn'>Button</button>
</a>

Stili düğmenin kendisine eklemek yeterli olmayabilir, a:focus, a:active { outline: none }uygun olan yerlerde CSS kurallarını eklemeniz gerekebilir (bu benim için çalıştı).

Aşağıdakileri deneyin

.bootstrap-select .dropdown-toggle:focus 
 {
          outline: 0 !important;
 }

Bazen {outline: 0}sorunu çözmedi ve deneyebiliriz{box-shadow: none;}

Önyükleme 4 kullanıyorum, anahat ve kutu gölgesi kullanabilirsiniz.

#buttonId {
    box-shadow: none;
    outline: none;
}

Veya düğme, arka planı olmayan bir div gibi bir öğenin içindeyse, kutu gölgesi yeterlidir.

#buttonId {
     box-shadow: none;
}

Örnek: https://codepen.io/techednelson/pen/XRwgRB

4.3 veya daha üst sürümünü kullanıyorsanız, kodunuz düzgün çalışmayacaktır. Kullandığım bu. Benim için çalıştı.

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

Düğme sınıfını ( .btn ) hedeflemek yerine , burada düğme öğesinin kendisini hedefliyorum ve benim için çalışıyor.

        button:focus {
          outline:none !important;
          box-shadow:none !important;
        }

Ve shadow-nonegiriş alanı için sınıfı kullanabilir

İşte CSS olmayan bir yöntem. JQuery'yi kullanarak, öğe her tıklandığında "odak" sınıfını kaldırmanız yeterlidir.

$(".btn").mousemove(function(element) { $(this).removeClass("focus"); });

Bu yöntem, sınırın yanıp sönmesine ve ardından kısa bir süre sonra geri dönmesine neden olabilir, ki bu bence kötü görünmüyor (düğmeye tıklandığında yanıtın bir parçası gibi görünüyor).

.Mousemove () kullanmamın nedeni, .click () ve .mouseup () ikisinin de etkisiz olduğunun kanıtlanmasıydı.

Bu değerleri değiştirmek benim için çalıştı. Chrome'un Geliştirici Araçlarına bakarak buldum

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: /*Change This*/;
    border-color: /*Change This*/;
}

Bu, düğmenin gölgesini de korur, yalnızca tıklandığında düğmenin rengini değiştirir.

Tam önyükleme deyimlerini geçersiz kılın:

.btn-primary.focus, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-primary.dropdown-toggle:focus{
 box-shadow: none;
}

Kenarlık Rengini tekrar Gri olarak değiştirin

.btn:focus,
.btn:active{
 border: 1px solid #ced4da !important;
}

Tüm öğeler için SCSS yolu (yalnızca düğmeler değil):

body {
  * {
    &:focus, &.focus,
    &:active, &.active {
      outline: transparent none 0 !important;
      box-shadow: 0 0 0 0 rgba(0,123,255,0) !important;
      -webkit-box-shadow: none !important;
    }
  }
}