Tıklamada düğmelerin etrafındaki odak nasıl kaldırılır

226

Düğmelerim tıklatıldıktan sonra etraflarında vurgu var. Bu Chrome'da.

Seçilmemiş seçilmiş

<button class="btn btn-primary btn-block">
    <span class="icon-plus"></span> Add Page
</button>

Bootstrap'ı bir tema ile kullanıyorum, ama eminim ki bu değil: Bunu daha önce başka bir projede fark ettim.

Bunun <a>yerine bir etiket kullanırsam gider <button>. Neden? Kullanmak istersem <button>nasıl ortadan kaldırırdım?

html  css  twitter-bootstrap 
— Sean Clark Hess
kaynak
12
anahat: 0; ilginizi çekebilir
— Wiggler Jtag
Tıklamadan sonra herhangi bir sınıf ekleniyor mu?
— Kuzgun
1
anahat: 0 yardımcı görünmüyor, ne de webkit görünümü
— Sean Clark Hess
7
Bu soruna geçici bir çözüm bulmak için farklı yöntemler öneren 28 cevap, bugün ön uç web geliştirme üzgün durum kanıtıdır.
— deltanine
3
Bu erişilebilirlik özelliğini bir sorun olarak gören insanlar, bugün ön uç web geliştirmenin üzgün durumunun kanıtıdır.
— Quentin

Yanıtlar:

294

Bu Soru ve Cevapları başka bir sayfada buldum ve düğme odaklama tarzını geçersiz kılmak benim için çalıştı. Bu sorun Chrome yüklü MacOS'a özgü olabilir.

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

Bununla birlikte, bunun erişilebilirlikle ilgili etkileri olduğunu ve düğmeleriniz ve girişleriniz için iyi bir tutarlı odaklama durumuna gelene kadar önerilmediğini unutmayın. Aşağıdaki yorumlara göre, fareleri kullanamayan kullanıcılar var.

— jerimiah797
kaynak
33
Bunu da düşündüm, ancak taslağı kaldırmanın erişilebilirlik sorunları yok mu?
— silvenon
10
Sanýrým baţka seçeneđimiz yok. .btn:active:focusSeçiciyi etkin durumdan kaldırmak için de ekleyebilirsiniz .
— silvenon
46
Anahattı bir düğmeden kaldırmak erişilebilirlik açısından kesinlikle kötüdür. Fareyi kontrol edemeyen ve klavyeyle bir sayfa boyunca sekme yapabilmesi gereken kullanıcılar var. Anahatların kaldırılması bunu çok zorlaştırır. Düğmenin tıklamaya odaklanmasını önlemek muhtemelen daha iyidir.
— Murphy Randle
Gelecekteki gezginler için bu kod, varsayılan düğme (tüm düğmeler değil) için tüm düğme durumlarındaki tüm stilleri tamamen değiştirir:.btn-default, .btn-default:hover, .btn-default:active, .btn-default:active:focus, .btn-default:visited, .btn-default:focus { color: #dcdcdc; background-color: #232323; outline: none; }
— Geordie
1
yerleşik bootstrap değişkenleri kullanılıyorsa, bu iki varyasyonu şu şekilde ayarlayarak elde edilebilir: $ btn-focus-width: 0; $ btn odaklama-box-shadow: none;
— bullettrain
110

Gibi bir şey istiyorsun:

<button class="btn btn-primary btn-block" onclick="this.blur();">...

.Blur () yöntemi odak vurgulamasını doğru şekilde kaldırır ve Bootstraps'ın stillerini bozmaz.

— cshotton
kaynak
9
Bu kısa bir an için taslağı görüntüler, bu da onu harap eder: /
— silvenon
2
Click olayı yerine odak olayını tetiklersem titreme görmüyorum.
— Charles
2
Bu harika çalıştı! Aynı düğmeye farklı bir click () olay işleyicisi (yani, söz konusu düğmeye tıkladığınızda çalışan kod) eklemeye çalışırsam olası sorunlar olur mu?
— Nils_e
4
Eğer birisi bunun bootstrap v4'te çalışıp çalışmadığını merak ediyorsa, işe yarıyor. Cevap 2018'de hala geçerli, şerefe!
— jreed
4
En çok oylanan soruya kıyasla erişilebilirlik-Tamam mı?
— CharlesM
47

Benim anlayış odak öncelikle aşağıdaki uygulanan olmasıdır onMouseDownçağırarak, böylece olay e.preventDefault()içindeonMouseDown ihtiyaçlarınıza bağlı temiz bir çözüm olabilir. Bu kesinlikle erişilebilirlik dostu bir çözümdür, ancak açıkçası web projenizle uyumlu olmayan fare tıklamalarının davranışını ayarlar.

Şu anda bu çözümü kullanıyorum (bir react-bootstrapproje içinde ) ve bir tıklamadan sonra bir odak titremesi veya düğme odaklaması almıyorum, ancak yine de odağımı sekebilir ve aynı düğmelerin odağını görsel olarak görselleştirebilirim.

— pijama
kaynak
2
Evet. çözümünüz çalışır. Bahşiş için teşekkürler. İşte çözüm için Fiddle . Ancak her düğmeye bir javascript işleyicisi eklenmesini gerektirir. Bunu sadece CSS çözümü ile başarabilirsek harika olur.
— Galeel Bhasha
1
İnsanların, tıkladığınızda odaklanmanın bir öğeye gitmesini beklediğini düşünüyorum ve bu çözüm bunu engelliyor. Sıklıkla bir öğeye tıklıyorum ve daha sonra oradan sekme yapabilmem için fareyi bırakmadan önce uzaklaşıyorum.
— Michael Tontchev
7
Bir snippet'e göz atan herkes için, bu çalışmalı ve korunmalıdırCick:onMouseDown={e => e.preventDefault()}
— Adam K Dean
1
Bu, boşluk çubuğunun ve dönüş tuşunun düğmeyi "tıklatmasını" önler. Belki daha eksiksiz bir çözüm ile bu geri eklemektir: onKeyUp={(e) => {if (e.keyCode === 13 || e.keyCode === 32) handleClick()}.
— jfbloom22
onKeyUpEtkinlik içinde e.preventDefault () yöntemini çağırmamalısınız . Bunu yaparsanız, boşluk tuşuna veya dönüş tuşuna basıp herhangi bir yere sekme veya tıkladıktan sonra düğme odaklanmış olarak kalır.
— jfbloom22
30

Henüz kimsenin bunu yayınlamadığına inanamıyorum.

Düğme yerine bir etiket kullanın.

<label type="button" class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</label>

Vaktini boşa harcamak

— Adam McKenna
kaynak
11
Bu, çoğu kullanıcı için iyi çalışır, ancak bu yöntem ekran okuyucuları veya klavyeler için uygun değildir ve kör kullanıcıları ve zayıf motor becerileri olan ve düğmeyle etkileşime giremeyen kullanıcıları bırakacaktır.
— Murphy Randle
8
1. Etiketi <a> etiketi ile değiştirin. böylece klavye ile erişilebilir. 2. ekran okuyucu kullanıcısı için erişilebilirliği artırmak için aria-role = "button" ekleyin. güncellendi Fiddle
— Galeel Bhasha
güzel bir çözüm, bana yardımcı oldu, ancak bir şekilde bir sarıcı ile bile açısal direktif için çalışmıyor, örneğin<a class="btn"><my-directive/></a>
— ya_dimon
2
Etiketler sekme sırasında fare olmayan kullanıcılar için tamamen atlanır, erişilebilirlik için kötü
— Felipe Haziran
1
Bootstrap 4'te düğmenin görünümünü değiştiriyor gibi görünüyor.
— Jason Kim
30

O (user1933897 en olduğu gibi tüm düğmeleri odaklanmış sadece kaldır anahat kolay olsa cevap ), ama bu çözüm bakış erişilebilirlik açısından kötü (örneğin bkz Tarayıcının Varsayılan Odak anahat ile Durdur Messing )

Öte yandan, tarayıcınızı, tıkladıktan sonra odaklandığını düşünüyorsa, tıkladığınız düğmeyi odaklanmış olarak şekillendirmeyi bırakmaya ikna etmek muhtemelen imkansızdır (Sana bakıyorum, OS X'de Chrome).

Öyleyse ne yapabiliriz? Aklıma birkaç seçenek geliyor.

1) Javascript (jQuery): $('.btn').mouseup(function() { this.blur() })

Düğmeye tıklandıktan hemen sonra tarayıcınıza herhangi bir düğmenin etrafındaki odağı kaldırmasını söylüyorsunuz. Bunun mouseupyerine, clickklavye tabanlı etkileşimler için varsayılan davranışı koruyoruz ( mouseupklavye tarafından tetiklenmiyor).

2) CSS: .btn:hover { outline: 0 !important }

Burada yalnızca vurgulu düğmeler için anahattı kapatırsınız . Açıkçası ideal değildir, ancak bazı durumlarda yeterli olabilir.

— Alexis
kaynak
4
1 rakamı yararlı bir ipucudur. Düğmeye basılmadığında odağı devre dışı bırakır, ancak basılıyken ekranda bırakılmasını sağlar. İle tıklanan etkin öğeye odaklanmayı devre dışı bıraktım :active:focus {outline:none;}.
— certainlyakey
Olay dinleyicilerini bağlayan steno işlevler jQuery'de kullanımdan kaldırılmıştır, bu nedenle .on('mouseup', function() { ... })yerine kullanmak daha iyidir.mouseup()
— Crazy Redd
16

Bu benim için çalıştı. Gerekli CSS'yi geçersiz kılan özel bir sınıf oluşturdum.

.custom-button:focus {
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

resim açıklamasını buraya girin

-Webkit-box-shadow, Chrome ve safari tarayıcılarında çalışır.

— men_aka
kaynak
benim için çalışıyor ama border: none !important;aynı boyutları korumak için düğmeyi çıkarmak zorunda kaldım
— Emeka Mbah
1
Ben işe yaramadı ama "kutu-gölge: yok! Önemli;" benim için iş teşekkürler @Menaka
— Zaif Warm
11

Bu benim için işe yarar, bahsedilmeyen başka bir çözüm. Sadece tıklama etkinliğine atın ...

$(this).trigger("blur");

Veya başka bir olaydan / yöntemden çağırın ...

$(".btn_name").trigger("blur");
— soymak
kaynak
Buradaki sorun, bir klavye kullanıcısı düğmeyi "tıklattığında" (odaklanarak ve ardından boşluğa basarak) odağı kaybetmesidir. Daha sonra nerede olursanız olun geri sekmek zorundasınız. Lyn
— Tamlyn
8

Ana :focus { outline: none; }hatları kaldırmak için kuralı kullanırsanız, bağlantı veya kontrol odaklanabilir, ancak klavye kullanıcıları için odak göstergesi olmaz. JS gibi bu tür kaldırma yöntemleri onfocus="blur()"daha da kötüdür ve klavye kullanıcılarının kontrol ile etkileşime girememelerine neden olur.

Kullanabileceğiniz, bir çeşit TAMAM olan kesmek, :focus { outline: none; }kullanıcılar fare ile etkileşime girdiğinde kural eklemeyi ve klavye etkileşimi algılanırsa bunları yeniden kaldırmayı içerir. Lindsay Evans bunun için bir lib yarattı: https://github.com/lindsayevans/outline.js

Ama html veya body etiketi üzerinde bir sınıf ayarlamayı tercih ederim. Ve bunu ne zaman kullanacağınızı CSS dosyasında kontrol edebilirsiniz.

Örneğin (satır içi olay işleyicileri yalnızca tanıtım amaçlıdır):

<html>
<head>
<style>
  a:focus, button:focus {
    outline: 3px solid #000;
  }
  .no-focus a, .no-focus button {
    outline: none;
  } 
</style>
</head>
<body id="thebody" 
onmousedown="document.getElementById('thebody').classList.add('no-focus');"
onkeydown="document.getElementById('thebody').classList.remove('no-focus');">
    <p>This her is <a href="#">a link</a></p>   
    <button>Click me</button>
</body>
</html>

Beraber bir kalem koydum: http://codepen.io/snobojohan/pen/RWXXmp

Ancak performans sorunları olduğunu unutmayın. Bu, kullanıcı fare ve klavye arasında her geçiş yaptığında yeniden boyamaya zorlar. Gereksiz Boyalar Önleme hakkında daha fazla bilgi http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/

— snobojohan
kaynak
6

Aynı şeyi fark ettim ve gerçekten beni rahatsız ediyor olsa da, bununla başa çıkmanın uygun bir yolu olmadığına inanıyorum.

Düğmenin erişilebilirliğini tamamen öldürdüğü için verilen diğer tüm çözümlere karşı öneriyorum, bu yüzden şimdi, düğmeye tıkladığınızda, beklenen odaklamayı elde edemezsiniz.

Bundan kaçınılmalıdır!

.btn:focus {
  outline: none;
}
— Oscar Bolaños
kaynak
Bunun yanlış olduğunu düşünmüyorum, çünkü odaklandığında hala biraz farklı yıldırım var, bu yüzden klavye kullanıcıları bile bunu tanıyabilir. Ancak bu yeterli değil, çünkü sol fare düğmesini basılı tuttuğunuzda hala kenarlık çerçevesi göreceksiniz
— apocalypz
6

Bir çözüm buldum. odaklandığımızda, bootstrap kutu-gölge kullanır, bu yüzden sadece devre dışı bırakırız (yeterli itibar, resim yükleyemez :().

Ekledim 

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

işe yarıyor.

— şekerleme
kaynak
6

SEÇENEK 1: :focus-visibleSözde sınıfı kullanma

:focus-visibleSözde sınıf (dokunma veya fare tıklaması sayesinde, yani) çirkin hatlarını öldürmek ve klavye ile gezinme DEĞİLDİR kullanıcılar için düğmeleri ve çeşitli unsurları üzerinde halkalar odaklanmak için kullanılabilir.

/** 
 * The default focus style is likely provided by Bootstrap or the browser
 * but here we override everything else with a visually appealing cross-
 * browser solution that works well on all focusable page elements
 * including buttons, links, inputs, textareas, and selects.
 */
*:focus { 
  outline: 0 !important;
  box-shadow:
    0 0 0 .2rem #fff, /* use site bg color to create whitespace for faux focus ring */
    0 0 0 .35rem #069 !important; /* faux focus ring color */
}

/**
 * Undo the above focused button styles when the element received focus
 * via mouse click or touch, but not keyboard navigation.
 */
*:focus:not(:focus-visible) {
  outline: 0 !important;
  box-shadow: none !important;
}

Uyarı: 2020'den itibaren :focus-visiblesözde sınıf tarayıcılarda geniş çapta desteklenmemektedir . Ancak çoklu dolgunun kullanımı çok kolaydır; aşağıdaki talimatlara bakın.


SEÇENEK 2: .focus-visibleÇoklu dolguyu kullanın

Bu çözüm, yukarıda belirtilen sözde sınıf yerine normal bir CSS sınıfı kullanır ve resmi bir Javascript tabanlı çoklu dolgu olduğundan geniş tarayıcı desteğine sahiptir .

1. Adım: Javascript bağımlılıklarını HTML sayfanıza ekleyin

Not: netleme görünür çoklu dolgu, classList özelliğini desteklemeyen birkaç eski tarayıcı için ek bir çoklu dolgu gerektirir :

<!-- place this code just before the closing </html> tag -->
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=Element.prototype.classList"></script>
<script src="https://unpkg.com/focus-visible"></script>

2. Adım: Stil sayfanıza aşağıdaki CSS'yi ekleyin

Aşağıda, yukarıda daha ayrıntılı olarak belgelenen CSS çözümünün değiştirilmiş bir sürümüdür. 

/**
 * Custom cross-browser styles for keyboard :focus overrides defaults.
 */
*:focus { 
  outline: 0 !important;
  box-shadow:
    0 0 0 .2rem #fff,
    0 0 0 .35rem #069 !important;
}

/**
 * Remove focus styles for non-keyboard :focus.
 */
*:focus:not(.focus-visible) {
  outline: 0 !important;
  box-shadow: none !important;
}

3.Adım (isteğe bağlı): gerektiğinde 'netleme görünür' sınıfını kullanın

Birisi dokunmayı tıkladığında veya kullandığında odak halkasını göstermek istediğiniz herhangi bir öğeniz varsa, focus-visiblesınıfı DOM öğesine eklemeniz yeterlidir.

<!-- This example uses Bootstrap classes to theme a button to appear like
     a regular link, and then add a focus ring when the link is clicked --->
<button type="button" class="btn btn-text focus-visible">
  Clicking me shows a focus box
</button>

Kaynak:

Demo:

— James Wilson
kaynak
Ancak Chrome bile henüz desteklemiyorsa, muhtemelen en iyi çözüm değildir (şimdilik)
— Elijah Mock
Bunun yerine ne öneriyorsun?
— JamesWilson
Bu çözüm daha standart hale gelene kadar diğer cevapların söylediği gibi taslağı gizleyin
— Elijah Mock
Bir şeyleri okuduğumda, erişilebilirlik bir endişe ise, anahat carte blanche'ı gizlemek <whatever>:focus { outline: none }bu çözümden daha kötü bir fikirdir. Aslında erişilebilirlik topluluğunda ASLA taslağı ASLA kaldırmamanızı ve bunun yerine her şeyin bir odak stiline (anahat veya kutu gölgesi) sahip olmasını ve desteklemek istemeyen insanlar var: tarayıcılar izin vermenin bir yolunu uygulayana kadar odak görünür kullanıcılar tüm öğelerin odaklanıp odaklanmayacağı konusunda bir kullanıcı tercihi belirtir. Düşünmeyi seviyorum: Odaklanabilirlik, tasarım kaygıları ve a11y arasında mutlu bir ortam.
— JamesWilson
5

Yukarıdakiler sizin için işe yaramazsa şunu deneyin:

.btn: focus {anahat: yok; kutu-gölge: yok; kenarlık: 2 piksel düz şeffaf;}

User1933897'nin belirttiği gibi, bu Chrome ile MacOS'a özgü olabilir.

— alns
kaynak
Yine de bu, bootstrap 4.0pencerelerde kullanıldığında geçerlidir
— 3gwebtrain
5

Geç, ama kim bilir birisine yardım edebilir. CSS şöyle görünecektir:

.rhighlight{
   outline: none !important;
   box-shadow:none
}

HTML şöyle görünecektir:

<button type="button" class="btn btn-primary rHighlight">Text</button>

Bu şekilde btn ve onunla ilişkili davranışları koruyabilirsiniz.

— Stephanie Wyche
kaynak
1
element:focus { box-shadow: none; }mavi anahat / gölge kaldırıldı.
— user435421
3

Yukarıdaki bir yorumda bundan bahsettim, ancak netlik için ayrı bir cevap olarak listelenmeye değer. Düğmeye gerçekten odaklanmanız gerekmediği sürece, herhangi bir CSS efekti uygulamadan önce odak olayını kaldırmak için kullanabilirsiniz:

$('buttonSelector').focus(function(event) {
    event.target.blur();
});

Bu, click olayını kullanırken görülebilen titremeyi önler. Bu, arayüzü kısıtlar ve düğmeye sekme yapamazsınız, ancak bu tüm uygulamalarda sorun değildir.

— Charles
kaynak
Bu benim için hile yarısını yaptı. React ve React-Bootstrap kullanıyorum. Tıkladıktan sonra, düğme bu konuda bir parıltı ile vurgulanmıştı. E.target.blur () eklenmesi; parlamayı kaldırır, ancak düğme farklı bir renkte kalır.
— pixelwiz
3

stil

.not-focusable:focus {
    outline: none;
    box-shadow: none;
}

kullanma

<button class="btn btn-primary not-focusable">My Button</button>
— Bogdan Kanteruk
kaynak
Bu çözümün diğer cevaplardan farkı nedir?
— apaul
2
Küçük bir fark var - tüm düğmelerin, bağlantıların vb. Davranışlarını geçersiz
— kılmadan
3

Düğmenin çevresindeki kenarlığı kaldırmak için bu çözümü deneyin. Bu kodu css içine ekleyin.

Deneyin 

button:focus{
outline:0px;
}

Çalışmıyorsa, aşağıda kullanın.

button:focus{
 outline:none !important;
 }
— Rana Alamer
kaynak
İkincisi, React Material UI düğmesiyle bile çalışıyor
— Geek Guy
3

Bunu yapmak için saf bir css yolu isteyen insanlar için:

:focus:not(:focus-visible) { outline: none }

Bu ayrıca bağlantı için de işe yarayabilir ve bonus, klavye erişilebilirliklerini korur. Son olarak, desteklemeyen tarayıcılar tarafından yoksayılır: netleme görünür

— Martin Pedros
kaynak
4
Deneysel özellikler etkinleştirilmiş Bu yalnızca gereğince, Chrome üzerinde çalışacak developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
— Justin Kahn
focus-visibleşimdi resmi bir çoklu dolgu var. Bu soruya cevabım stackoverflow.com/a/60219624/413538 , tüm bunları nasıl anlamlandıracağımız hakkında ayrıntılı bilgi veriyor.
— JamesWilson
2

Benzer bir sorun yaşıyorduk ve Bootstrap 3'ün sekmelerinde (Chrome'da) sorun olmadığını fark ettik. Görünüşe göre tarayıcının en iyi ne yapacağına karar vermesine izin veren anahat stili kullanıyorlar ve Chrome istediğinizi yapıyor gibi görünüyor: öğeyi henüz tıklamadıysanız ana hatları odaklandığında gösterin.

outline-styleTarayıcı bunun ne anlama geldiğine karar vereceğinden, desteğini sabitlemek zordur. Birkaç tarayıcıyı kontrol etmek ve geri dönüş kuralına sahip olmak en iyisidir.

— TeknoFiend
kaynak
2

Başka bir olası çözüm, kullanıcı düğmeyi tıklattığında bir Javascript dinleyicisi kullanarak bir sınıf eklemek ve daha sonra başka bir dinleyici ile odakta bu sınıfı kaldırmaktır. Bu, Chrome'un tıklandığında odaklanmış bir düğmeyi dikkate alma konusundaki ilginç davranışını önlerken erişilebilirliği (görünür sekme) korur.

JS:

$('button').click(function(){
    $(this).addClass('clicked');
});
$('button').focus(function(){
    $(this).removeClass('clicked');
});

CSS:

button:focus {
    outline: 1px dotted #000;
}
button.clicked {
    outline: none;
}

Tam örnek burada: https://jsfiddle.net/4bbb37fh/

— Seb Woolford
kaynak
Tıklama yerine mouseDown kullanın. Tıklamada, fare ilk bastığında (serbest bırakmadan) anahat belirir.
— Vincent Hoch-Drei
2 
.btn:focus:active {
  outline: none;
}

bu, tıklandığında anahattı kaldırır, ancak sekme yaparken odağı korur (a11y için)

— yennefer
kaynak
Bu, yalnızca fare üzerindeki anahattı kaldırır. Fareyi yukarı kaldırdıktan sonra anahat belirir.
— Wellspring
2

Bu en iyi şekilde çalışır

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

bu anahat: hiçbiri hem düğme hem de etiket için çalışmaz

— Milan Panigrahi
kaynak
Bu soruya nasıl cevap veriyor? Lütfen biraz açıklama ekleyin.
— André Kool
1

Bunu CSS'ye ekle:

*, ::after, ::before {
    box-sizing: border-box;
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
— Gabriel Reis
kaynak
0

Aynı geçişi MacOS ve Chrome'da bir "geçiş" etkinliğini tetiklemek için bir düğme kullanırken de yaşadım. Bunu okuyan herkes zaten bir olay dinleyicisi kullanıyorsa, bunu çağırarak çözebilirsiniz..blur() , eylemlerinizi yaptıktan sonra .

Misal:

 nextQuestionButtonEl.click(function(){
    if (isQuestionAnswered()) {
        currentQuestion++;
        changeQuestion();
    } else {
        toggleNotification("invalidForm");
    }
    this.blur();
});

Zaten bir olay dinleyicisi kullanmıyorsanız, sadece bunu çözmek için bir tane eklemek gereksiz bir ek yük getirebilir ve önceki yanıtların sağladığı gibi bir stil çözümü daha iyidir.

— jospablos
kaynak
0

Ayarlayabilirsiniz tabIndex="-1". Odaklanabilir denetimlerle SEKME yaptığınızda tarayıcının bu düğmeyi atlamasını sağlar.

Burada önerilen diğer "düzeltmeler" yalnızca odak anahattını kaldırır, ancak yine de düğmeleri sekmeli bırakır. Bununla birlikte, kullanılabilirlik açısından, parıltıyı zaten kaldırdınız, böylece kullanıcınız şu anda odaklanmış olan düğmenin ne olduğunu bilemez.

Öte yandan, düğmeyi sekilemez hale getirmenin erişilebilirlik etkileri vardır.

bootstrap modalAlttaki kopyayı "Kapat" düğmesi olan X düğmesinden odak anahattını kaldırmak için kullanıyorum , böylece çözümüm erişilebilirlik üzerinde hiçbir etkiye sahip değil.

— zmechanic
kaynak
0

Bir webkit tarayıcısı (ve muhtemelen webkit satıcı önekiyle uyumlu bir tarayıcı) kullanıyorsanız, bu anahat düğmenin -webkit-focus-ringsahte sınıfına aittir . Basitçe bu kadar set outlineiçin none:

*:-webkit-focus-ring {
  outline: none;
}

(Bazı Chrome stilleri rağmen, sadece bir MacOS şey Krom böyle bir webkit tarayıcı ve bu etki Linux da olur olan MacOS için)

— Nate Symer
kaynak
0

<a>Düğme gibi davranarak kullanarak aynı sorunu yaşıyordum ve attr ekleyerek en azından benim için normal davranıyor yapar bir geçici çözüm eksik olduğunu keşfettim type="button".

<a type="button" class="btn btn-primary">Release Me!</a>

— spcsLrg
kaynak
typeÖzelliği, bu üzerinde hiçbir etkiye sahip ve gerektiği buttonbunun için geçersiz bir değerdir. Özellik bir MIME türünü kabul eder ve istemciye bağlantıyı <a type="application/pdf" ...>
— Quentin
@Quentin Teşekkürler. Evet, farkındayım. İle başladım role="button"ama işe yaramadı ( <button>yerine kullandıktan sonra <a>). Benim uygulama özellikle bir <a>ve değil talep etti <button>. Çok fazla tamir ettikten sonra, bu geçici çözümü keşfettim (büyük olasılıkla bir BS hatası)!
— spcsLrg
0

doğrudan html etiketinde (bootstrap temasını tasarımınızın başka bir yerinde yerinde bırakmak isteyebileceğiniz bir senaryoda) ..

denemek için örnekler ..

<button style="border: transparent;">
<button style="border: 1px solid black;">

..ect ,. istenen etkiye bağlı olarak.

— Hiç kimse
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.