Chrome'daki css özel stil düğmesinden mavi kenarlığı kaldırın

Bir web sayfasında çalışıyorum ve özel stilli <button>etiketler istiyorum . CSS ile Dolayısıyla, dedim: border: none. Şimdi safaride mükemmel çalışıyor, ancak kromda, düğmelerden birini tıkladığımda, etrafına sinir bozucu bir mavi kenarlık koyuyor. Düşündüm button:active { outline: none }ya button:focus { outline:none }da çalışacaktım, ama ikisi de işe yaramadı. Herhangi bir fikir?

Bu tıklanmadan önce nasıl göründüğü (ve yine de tıklandıktan sonra nasıl görünmesini istiyorum):

Ve bahsettiğim sınır bu:

İşte benim CSS:

button.launch {
    background-color: #F9A300;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.launch:hover {
    cursor: pointer;
    background-color: #FABD44;
}

button.change {
    background-color: #F88F00;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.change:hover {
    cursor: pointer;
    background-color: #F89900;
}

button:active {
    outline: none;
    border: none;
}

Bunu yapmak , sitenizin erişilebilirliğini azalttığı için önerilmez ; daha fazla bilgi için bu gönderiye bakın .

Bununla birlikte, ısrar ederseniz, bu CSS'nin çalışması gerekir:

button:focus {outline:0;}

Bir göz atın veya JSFiddle: http://jsfiddle.net/u4pXu/

Veya bu snippet'te:

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.change {
background-color: #F88F00;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.change:hover {
cursor: pointer;
background-color: #F89900;
}

button:active {
outline: none;
border: none;
}

button:focus {outline:0;}

<button class="launch">Launch with these ads</button> 
<button class="change">Change</button>

Bekle! Bu çirkin taslağın bir nedeni var!

Bu çirkin mavi çerçeveyi kaldırmadan önce, erişilebilirliği dikkate almak isteyebilirsiniz . Varsayılan olarak, bu mavi çerçeve odaklanabilir öğelere yerleştirilir. Bu, erişilebilirlik sorunları olan kullanıcıların sekmeye basarak bu düğmeyi odaklayabilmelerini sağlar. Bazı kullanıcılar fare kullanma becerisine sahip değildir ve bilgisayar etkileşimi için yalnızca klavyeyi (veya başka bir giriş aygıtını) kullanmalıdır. Mavi anahattı kaldırdığınızda, hangi öğenin odaklandığına dair görsel bir gösterge artık yoktur. Mavi anahat kaldırmak için gidiyoruz varsa, gereken düğme odaklı olduğunu görsel endikasyon başka tür ile değiştirin.

Olası Çözüm: Odaklandığında Düğmeleri Koyulaştır

Aşağıdaki örnekler için Chrome'un mavi çerçevesi ilk önce button:focus { outline:0 !important; }

Temel Bootstrap düğmeleriniz normal şekilde göründükleri gibidir:

İşte odak aldıkları düğmeler:

Düğmelere basıldığında düğmeler:

Gördüğünüz gibi, odaklanıldığında düğmeler biraz daha koyu. Şahsen, odaklanmış durum ile düğmenin normal durumu arasında çok belirgin bir fark olması için odaklanmış düğmelerin daha da karanlık olmasını tavsiye ederim.

Sadece engelli kullanıcılar için değil

Sitenizi daha erişilebilir hale getirmek, genellikle gözden kaçan ancak web sitenizde daha verimli bir deneyim oluşturmanıza yardımcı olabilecek bir şeydir. Ellerini klavyede tutmak için web sitelerinde gezinmek için klavye komutlarını kullanan birçok normal kullanıcı vardır.

Sadece tümünü seçip anahat uygulayarak sayfadaki tüm etiketlerden anahattı kaldırırım: her şeye yok :)

*:focus {outline:none}

Bagofcole'un da belirttiği gibi,! Önemli de eklemeniz gerekebilir, böylece stil şöyle görünecektir:

*:focus {outline:none !important}

Bu problemin örneğinde belirtmek zorunda kaldım box-shadow: none

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

Daha !importantiyi bir sonuç için beyanı unutmayın

button:focus {outline:0 !important;}

! Önemli özelliğe sahip bir kural, CSS belgesinde nerede olursa olsun her zaman uygulanır.

Çıkarmak outlineerişilebilirlik açısından korkunç! İdeal olarak, odaklama halkası yalnızca kullanıcı klavyeyi kullanmayı planladığında görünür .

Kullanın : netleme görünür . Şu anda CSS kullanarak yalnızca klavye odaklamasını şekillendirmek için bir W3C önerisidir ve Firefox'ta ( caniuse ) desteklenmektedir . Diğer büyük tarayıcılar destekleyene kadar, bu sağlam çoklu dolguyu kullanabilirsiniz .

/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
  outline: none;
}

/* Optional: Customize .focus-visible */
.focus-visible {
  outline-color: lightgreen;
}

Daha fazla bilgiye ihtiyacınız olması durumunda daha ayrıntılı bir yazı da yazdım .

Bunu CSS dosyanıza ekleyin.

*{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

Şunlardan birini kullanın:

:active {
    outline:none;
}

veya bu işe yaramazsa:

:active {
   outline:none !important;
}

Bu benim için işe yarıyor (en azından FF ve Chrome). Durumu hedeflemek yerine, :focusdurumu hedefleyin ve :activekullanıcı bir bağlantıyı tıkladığında tarayıcınızdaki estetik açıdan rahatsız edici vurgulamayı kaldıracaktır. Ancak, engelli sekmeleri veya kaydırma sekmeleri olan bir kullanıcı bir sayfa boyunca odak durumlarını koruyacaktır. Her iki taraf da mutlu. :)

bu sorun için:

bunu kullan:

   *{
         -webkit-tap-highlight-color: rgba(0,0,0,0);
         -webkit-tap-highlight-color: transparent; /* For some Androids */
    }

sonuç:

Bootstrap kullanan ve bu sorunu yaşayan herkes için: active: focus yanı sıra sadece: active ve: focus özelliklerini kullanırlar.

element:active:focus {
    outline: 0;
}

İnşallah birini bulmak için biraz zaman kurtardı, neden böyle basit bir şey neden çalışmadığını merak biraz kafamı vurdu.

Bootstrap 4.1 ve muhtemelen diğer sürümleri kullanıyorsanız çözümlerin çoğu çalışmaz. Çok kafa vurduktan sonra, gölge-yok sınıfını uygulamanız gerektiğini keşfettim :

<button class="btn shadow-none">Bootstrap (4.1) button without shadow</button>

Benim için işe yarayan buydu:

button:focus {
    box-shadow:none;
}

Chrome ve diğer tarayıcılar için düzeltme

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

mavi kenarlık sorunu olan tüm öğeler için bu kodu deneyin

*{
outline: none;
}

veya

*{
outline-style: none;
}

Burada bahsedilmeyen erişilebilirlik sorununu çözmenin başka bir yolu da biraz Javascript kullanmaktır . Krediler hackernoon'dan bu anlayışlı blog yayınına gider: https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2

Buradaki yaklaşım gerçekten basit ama etkilidir: Kullanıcılar sayfada gezinmek için sekme tuşunu kullanmaya başladığında bir sınıf eklemek (ve fareye tekrar döndüğünüzde isteğe bağlı olarak kaldırmak). .

function handleFirstTab(e) {
    if (e.keyCode === 9) { // the "I am a keyboard user" key
        document.body.classList.add('user-is-tabbing');
        window.removeEventListener('keydown', handleFirstTab);
    }
}

window.addEventListener('keydown', handleFirstTab);

Aynı sorunla karşılaştım, bu yüzden basit CSS-

.custom-button {
    outline: none
}

Girişte aynı efekti silmek istiyorsanız, düğmenin yanı sıra aşağıdaki kodu da ekleyebilirsiniz.

input:focus {outline:0;}

Tüm modern tarayıcılar css-selector'u desteklemeye başlayana kadar : odak-görünür , erişilebilirliği kaydetmenin
en basit ve muhtemelen en iyi yolu bu zor odağı sadece fare kullanıcıları için kaldırmak ve klavye kullanıcıları için kaydetmek :

1. bu küçük çoklu dolguyu kullanın (yaklaşık 10kb): https://github.com/WICG/focus-visible 2.
css'inizde bir yere sonraki kodu ekleyin:

.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

Css4-selector tarayıcı desteği: focus-visible şu anda çok zayıf:
https://caniuse.com/#search=focus-visible

Basitçe yazın outline:none;. Sahte eleman kullanmaya gerek yokfocus

Bu Chrome ailesinde bir sorundur ve sonsuza dek oradadır.

Bir hata oluştu https://bugs.chromium.org/p/chromium/issues/detail?id=904208

Burada gösterilebilir: https://codepen.io/anon/pen/Jedvwj düğme benzeri herhangi bir şeye bir kenarlık eklediğinizde (örneğin bir etikete role = "button" eklendi) Chrome karmaşası ve farenizle tıkladığınızda odak durumunu ayarlar.

Bu düzeltmeyi kullanmanızı kesinlikle tavsiye ederim: https://github.com/wicg/focus-visible .

Sadece aşağıdakileri yapın

npm install --save focus-visible

Komut dosyasını html'nize ekleyin:

<script src="/node_modules/focus-visible/dist/focus-visible.min.js"></script>

veya webpack veya benzeri bir şey kullanıyorsanız ana giriş dosyanıza içe aktarın:

import 'focus-visible/dist/focus-visible.min';

sonra bunu css dosyanıza koyun:

// hide the focus indicator if element receives focus via mouse, but show on keyboard focus (on tab).
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

// Define a strong focus indicator for keyboard focus.
// If you skip this then the browser's default focus indicator will display instead
// ideally use outline property for those users using windows high contrast mode
.js-focus-visible .focus-visible {
  outline: magenta auto 5px;
}

Sen edebilirsiniz sadece ayarlayın:

button:focus {outline:0;}

ancak çok sayıda kullanıcınız varsa, fareleri kullanamayanları veya klavyelerini sadece hız için kullanmak isteyenler dezavantajlısınız.

Bootstrap ile aynı sorunu yaşadım. Hem anahat hem de kutu gölgesi ile çözdüm

.btn:focus, .btn.focus {
    outline: none !important;
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0) !important; // or none
}