Giriş Düğmesinden Anahat Kenarlığı Nasıl Kaldırılır

başka bir yere tıklandığında kenarlık kaybolur, odaklanmayı denemedi, ancak yardımcı olmadı, tıklandığında çirkin düğme kenarlığı nasıl kaybolur?

input[type="button"] {
  width: 120px;
  height: 60px;
  margin-left: 35px;
  display: block;
  background-color: gray;
  color: white;
  border: none;
}

<input type="button" value="Example Button">

anahat kullanarak : yok; bu sınırı chrome'da kaldırabiliriz

<style>
input[type="button"]
{
    width:120px;
    height:60px;
    margin-left:35px;
    display:block;
    background-color:gray;
    color:white;
    border: none;
    outline:none;
}
</style>

Chrome ve FF'de ana hatlara odaklanın

kaldırıldı:

input[type="button"]{
   outline:none;
}
input[type="button"]::-moz-focus-inner {
   border: 0;
}

gösteri

Erişilebilirlik (A11Y)

/* Don't forget! User accessibility is important */
input[type="button"]:focus {
  /* your custom focused styles here */
}

Benim için basitçe çalışıyor :)

*:focus {
    outline: 0 !important;
}

Bu benim için çalıştı

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

outlineMülkiyet ne ihtiyaç vardır. Aşağıdaki özelliklerin her birini tek bir bildirimde ayarlamanın kısaltması:

• outline-style
• outline-width
• outline-color

outline: none;Kabul edilen cevapta önerilen kullanabilirsiniz . İsterseniz daha spesifik de olabilirsiniz:

button {
    outline-style: none;
}

button:focus{outline:none !important;}

Bootstrap'te!important kullanılıyorsa ekleyin

Set hem outlineve box-shadowdüğmesini özellikleri noneve onları yapmak önemlidir .

input[type="button"] {
    outline: none !important;
    box-shadow: none !important;
} 

Değerleri önemli olarak ayarlamanın nedeni , diğer CSS kitaplıkları veya Bootstrap gibi çerçeveler kullanıyorsanız, bunun geçersiz kılınabilmesidir.

Bir odakta anahat özelliğini değiştirdiğinizde ortaya çıkan problemden kaçınmak için, kullanıcı giriş düğmesindeki Sekme veya üzerine tıkladığında görsel bir efekt vermektir.

Bu durumda bir gönderme türüdür, ancak bir type = "button" için de başvurabilirsiniz.

input[type="submit"]:focus {
    outline: none !important;
    background-color: rgb(208, 192, 74);
}

Düşündüğünüzden çok basit. Düğme odaklandığında, outlineözelliği şu şekilde uygulayın :

button:focus {
    outline: 0 !important;
}

Ama nonedeğeri kullandığımda , benim için işe yaramıyor.

Standart web geliştirmeleri için nessorry erişilebilir olayını kaldırmak iyi bir fikir değildir. Her iki durumda da bir çözüm arıyorsanız, sadece ana hatları kaldırmak sorunu çözmez. mavi renk gölgesini de kaldırmanız gerekir. belirli senaryolar için, bu özel stili düğmenizden ayırmak için ayrı bir sınıf adı kullanın.

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}

Bunu yapsan iyi olur

.remove-border.focus, .remove-border:focus {
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
 }

Ana hatları kaldırmak bir erişilebilirlik kabusu. Klavye kullanarak sekme yapan insanlar, hangi öğenin üzerinde olduklarını asla bilemezler.

Bırakmak en iyisi, çünkü tıklanan düğmelerin çoğu sizi bir yere götürecek veya ana hatları kaldırmanız ZORUNLUysa, belirli bir sınıf adı ayırın.

.no-outline {
  outline: none;
}

O zaman ihtiyaç duyduğunuz her an bu dersi uygulayabilirsiniz.

Aşağıdaki html verildiğinde:

<button class="btn-without-border"> Submit </button>

CSS stilinde aşağıdakileri yapın:

.btn-without-border:focus {
    border: none;
    outline: none;
}

Bu kod, düğme kenarlığını kaldıracak ve düğmeye tıklandığında düğme kenarına odaklanmayı devre dışı bırakacaktır.

Diğerlerinin de belirttiği gibi, selector:focus {outline: none;}bu sınırı kaldıracak, ancak bu sınır, klavye kullanıcılarının düğmeyi bulmasına izin veren ve olmaması gereken önemli bir erişilebilirlik özelliğidir. kaldırılmaması .

Endişeniz estetik göründüğünden, ana hattın rengini, stilini ve genişliğini değiştirebileceğinizi ve site stilinize daha iyi uyacağını bilmelisiniz.

selector:focus {
  outline-width: 1px;
  outline-style: dashed;
  outline-color: red;
}

Kısa gösterim:

selector:focus {
  outline: 1px dashed red;
}