Giriş metni öğesindeki kenarlık vurgulaması nasıl kaldırılır

610

Bir HTML öğesi 'odaklanmış' (şu anda seçili / sekmeli) olduğunda, birçok tarayıcı (en azından Safari ve Chrome) çevresine mavi bir kenarlık yerleştirir.

Üzerinde çalıştığım düzen için bu dikkat dağıtıcı ve doğru görünmüyor.

<input type="text" name="user" class="middle" id="user" tabindex="1" />

Firefox bunu yapmıyor gibi görünüyor, ya da en azından şu şekilde kontrol etmeme izin verecek:

border: x;

Birisi bana IE nasıl performans söyleyebilir, merak ediyorum.

Bu biraz parlamayı kaldırmak için Safari almak güzel olurdu.

— user170579
kaynak

1099

Sizin durumunuzda şunları deneyin:

input.middle:focus {
    outline-width: 0;
}

Veya genel olarak, tüm temel form öğelerini etkilemek için:

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

Yorumlarda, Noah Whitmore bunu özelliğe contenteditableayarlanmış unsurları desteklemek için daha da ileri götürmeyi önerdi true(onları bir tür giriş elemanı haline getirmek). Aşağıdakiler de bunları hedeflemelidir (CSS3 özellikli tarayıcılarda):

[contenteditable="true"]:focus {
    outline: none;
}

Ben bunu tavsiye etmem rağmen, tamlık hatırına her zaman odaklanma anahat devre dışı olabilir her şey bununla da:

*:focus {
    outline: none;
}

Odak ana hattının bir erişilebilirlik ve kullanılabilirlik özelliği olduğunu unutmayın; kullanıcıyı şu anda hangi öğeye odaklandığına dair ipucu verir.

— Cᴏʀʏ
kaynak

10

Teşekkürler Cory, harika bir ipucu. Ayrıca, tüm girdi alanlarını kapsayacak şekilde CSS'yi textarea'ya atamanız gerekir. input:focus, textarea:focus {outline: none;}

— BaronGrivet

7

seçmeyi de unutmaselect:focus {outline:none;}

— Geek Num 88

2

Ayrıca <button>, jQuery UI ve Twitter Bootstrap tarafından kullanılan etiket, diğer şeylerin yanı sıra, button: focustamlık için listeye ekleyeceğim .

— Chris Parton

1

Deneyimlerime göre bu odaklanmadan gerçekleşebilir, bu durumda bunu uygulamak zorunda kaldımbutton, button:focus { outline:none; }

— Mike Lyons

1

@ Cᴏʀʏ a11y ve kullanılabilirlik hakkındaki notu sorunuzun en üstüne taşımayı düşünür müsünüz? IMO, cevabınızı büyük ölçüde artıracaktır çünkü a11y özelliklerini kaldırmak kötü bir uygulamadır.

— Josef Engelfrost

64

Tüm girişlerden kaldırmak için

input {
 outline:none;
}

— marcjae
kaynak

31

Bu eski bir iş parçacığıdır, ancak başvuru için, bir giriş öğesinin ana hattını devre dışı bırakmanın erişilebilirliği engellediğinden önerilmez.

Anahat özelliği bir nedenden ötürü - kullanıcılara net bir klavye odağı göstergesi sağlar. Bu konu hakkında daha fazla okuma ve ek kaynaklar için bkz. Http://outlinenone.com/

— Boaz - Monica'yı eski durumuna döndür
kaynak

1

Boaz, FYI input.middle {anahat: hiçbiri} yine de öğeler arasında geçiş yapmanızı sağlar (input.middle dahil). Sekme tuşuna basmak giriş etiketine de odaklanacaktır. Tek şey, odaklanmayı (anahat odaklaması) göremeyeceğinizdir. Yani kullanmak o kadar zararlı değil ..

— :)

11

@AnishNair Only thing is that you won't be able to see the focus(outline focus) on it- ve bu tam olarak benim amacım. Anahatın kaldırılması, gerçek olayın değil, odak olayının görsel gösterimini devre dışı bırakır . Görsel göstergenin kaldırılması, bu göstergeye dayanan engelli insanlar için zorlaştığınız anlamına gelir.

— Boaz - Monica'yı

2

Bazen bir şey elde etmek için uzlaşmaya ihtiyacımız var

— :)

6

@AnishNair Doğru. Ancak çoğu zaman bu konuyu okuyan insanlar outline:none;, sonuçları düşünmeden kolay çıkış yolunu (yani ) tercih ederler . Bir şey kolay olduğu ve zaman kazandırdığı için, bunun en iyi uygulama olduğu anlamına gelmez :)

— Boaz - Monica'yı yeniden eski haline getir

5

Tartışmaya geç kaldım, ancak yine de girdilerin odaklanmış durumunu (kenarlık rengini veya genişliğini değiştirmek gibi) şekillendirebilirsiniz. Bunu yaparken erişilebilirliği göz önünde bulundurduğunuz sürece (iyi kontrast vb.), Varsayılan ana hatlar kadar erişilebilirdir.

— Meg

18

Bu yaygın bir endişe kaynağıdır.

Tarayıcıların oluşturduğu varsayılan anahat çirkin.

Bu örneğe bakınız:

Kod snippet'ini göster

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

<form>
  <label>Click to see the input below to see the outline</label>
  <input type="text" placeholder="placeholder text" />
</form>

Snippet'i genişlet

En çok tavsiye edilen en yaygın "düzeltme" outline:none- yanlış kullanılırsa erişilebilirlik için felakettir.

Peki ... taslak zaten ne işe yarar?

Her şeyi iyi açıklayan çok kuru bir web sitesi buldum.

SEKME tuşunu (veya eşdeğerini) kullanarak bir web belgesinde gezinirken "odak" olan bağlantılar için görsel geri bildirim sağlar. Bu özellikle fare kullanamayan veya görme bozukluğu olan kişiler için yararlıdır. Ana hatları kaldırırsanız, sitenize bu kişiler için erişilemez hale gelirsiniz.

Tamam, yukarıdakiyle aynı örneği deneyelim, şimdi TABgezinmek için tuşunu kullanın.

Kod snippet'ini göster

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

<form>
  <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
  <input type="text" placeholder="placeholder text" />
</form>

Snippet'i genişlet

Girişe tıklamadan bile odağın nerede olduğunu nasıl anlayabileceğinizi fark ettiniz mi?

Şimdi, outline:nonegüvenilirimizi deneyelim<input>

Yani, bir kez daha, TABmetni tıkladıktan sonra gezinmek ve ne olduğunu görmek için tuşunu kullanın.

Kod snippet'ini göster

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none;
}

<form>
  <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
  <input type="text" placeholder="placeholder text" />
</form>

Snippet'i genişlet

Odak noktasının nerede olduğunu anlamak daha zor mu? Tek söyleyen işaret imlecin yanıp sönmesidir. Yukarıdaki örneğim aşırı basit. Gerçek dünyadaki durumlarda, sayfada yalnızca bir öğe olmazdı. Bunun çizgisinde daha fazla bir şey.

Kod snippet'ini göster

.wrapper {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none;
}

<div class="wrapper">

  <form>
    <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
  </form>

  <form>
    First name:<br>
    <input type="text" name="firstname"><br> Last name:<br>
    <input type="text" name="lastname">
  </form>


  <form>
    <input type="radio" name="gender" value="male" checked> Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="other"> Other
  </form>



  <form>
    <label for="GET-name">Name:</label>
    <input id="GET-name" type="text" name="name">
  </form>


  <form>
    <label for="POST-name">Name:</label>
    <input id="POST-name" type="text" name="name">
  </form>


  <form>
    <fieldset>
      <legend>Title</legend>
      <input type="radio" name="radio" id="radio">
      <label for="radio">Click me</label>
    </fieldset>
  </form>

</div>

Snippet'i genişlet

Şimdi anahattı saklarsak bunu aynı şablonla karşılaştırın:

Kod snippet'ini göster

.wrapper {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

<div class="wrapper">

  <form>
    <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
  </form>

  <form>
    First name:<br>
    <input type="text" name="firstname"><br> Last name:<br>
    <input type="text" name="lastname">
  </form>


  <form>
    <input type="radio" name="gender" value="male" checked> Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="other"> Other
  </form>



  <form>
    <label for="GET-name">Name:</label>
    <input id="GET-name" type="text" name="name">
  </form>


  <form>
    <label for="POST-name">Name:</label>
    <input id="POST-name" type="text" name="name">
  </form>


  <form>
    <fieldset>
      <legend>Title</legend>
      <input type="radio" name="radio" id="radio">
      <label for="radio">Click me</label>
    </fieldset>
  </form>

</div>

Snippet'i genişlet

Bu yüzden aşağıdakileri kurduk

Anahatlar çirkin
Onları çıkarmak hayatı zorlaştırır.

Peki cevap ne?

Çirkin dış çizgiyi kaldırın ve odağı belirtmek için kendi görsel ipuçlarınızı ekleyin.

İşte ne demek istediğimin çok basit bir örneği.

Anahattı kaldırıyorum ve alt kenarlık ekliyorum : odak ve : aktif . Ayrıca üst, sol ve sağ taraftaki varsayılan kenarlıkları şeffaf olarak ayarlayarak kaldırırım : odak ve : etkin (kişisel tercih)

Kod snippet'ini göster

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none
}

input:focus,
input:active {
  border-color: transparent;
  border-bottom: 2px solid red
}

<form>
  <label>Click to see the input below to see the outline</label>
  <input type="text" placeholder="placeholder text" />
</form>

Snippet'i genişlet

Bu yüzden, yukarıdaki yaklaşımı daha önceki "gerçek dünya" örneğimizle deniyoruz:

Kod snippet'ini göster

.wrapper {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none
}

input:focus,
input:active {
  border-color: transparent;
  border-bottom: 2px solid red
}

<div class="wrapper">

  <form>
    <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
  </form>

  <form>
    First name:<br>
    <input type="text" name="firstname"><br> Last name:<br>
    <input type="text" name="lastname">
  </form>


  <form>
    <input type="radio" name="gender" value="male" checked> Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="other"> Other
  </form>



  <form>
    <label for="GET-name">Name:</label>
    <input id="GET-name" type="text" name="name">
  </form>


  <form>
    <label for="POST-name">Name:</label>
    <input id="POST-name" type="text" name="name">
  </form>


  <form>
    <fieldset>
      <legend>Title</legend>
      <input type="radio" name="radio" id="radio">
      <label for="radio">Click me</label>
    </fieldset>
  </form>

</div>

Snippet'i genişlet

Tamamen Materialize gibi kaldırmanın aksine "taslağı" değiştirme fikrine dayanan harici kütüphaneler kullanılarak bu genişletilebilir.

Çirkin olmayan ve çok az çaba ile çalışan bir şeyle sonuçlanabilirsin

Kod snippet'ini göster

body {
  background: #444
}

.wrapper {
  padding: 2em;
  width: 400px;
  max-width: 100%;
  text-align: center;
  margin: 2em auto;
  border: 1px solid #555
}

button,
.wrapper {
  border-radius: 3px;
}

button {
  padding: .25em 1em;
}

input,
label {
  color: white !important;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css" />

<div class="wrapper">
  <form>
    <input type="text" placeholder="Enter Username" name="uname" required>
    <input type="password" placeholder="Enter Password" name="psw" required>
    <button type="submit">Login</button>
  </form>
</div>

Snippet'i genişlet

— Ben haz kode
kaynak

18

Bu, çizginin bir sınır ya da anahat olmadığını, bir gölge olduğunu keşfetene kadar bir süre için beni karıştırıyordu. Yani kaldırmak için bunu kullanmak zorunda kaldı:

input:focus, input.form-control:focus {

    outline:none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

— Rikard Askelöf
kaynak

6

Bunu devre dışı bırakmak için CSS kullanabilirsiniz! Mavi kenarlığı devre dışı bırakmak için kullandığım kod:

*:focus {
outline: none;
}

Bu mavi sınırı kaldıracak!

Bu çalışan bir örnektir: JSfiddle.net

Umarım yardımcı olur!

— 1010
kaynak

4

Tüm odak stillerini kaldırmak erişilebilirlik ve genel olarak klavye kullanıcıları için kötüdür. Ancak ana hatlar çirkindir ve her etkileşimli öğe için özel bir odaklanmış stil sağlamak gerçek bir acı olabilir.

Bulduğum en iyi uzlaşma, anahat stillerini yalnızca kullanıcının gezinmek için klavyeyi kullandığını tespit ettiğimizde göstermektir. Temel olarak, kullanıcı SEKME tuşuna basarsa, ana hatları gösteririz ve fareyi kullanıyorsa, bunları gizleriz.

Bazı öğeler için özel odaklama stilleri yazmanızı engellemez, ancak en azından iyi bir varsayılan değer sağlar.

Bunu nasıl yaparım:

// detect keyboard users

const keyboardUserCssClass = "keyboardUser";

function setIsKeyboardUser(isKeyboard) {
  const { body } = document;
  if (isKeyboard) {
   body.classList.contains(keyboardUserCssClass) || body.classList.add(keyboardUserCssClass);
  } else {
   body.classList.remove(keyboardUserCssClass);
  }
}

// This is a quick hack to activate focus styles only when the user is
// navigating with TAB key. This is the best compromise we've found to
// keep nice design without sacrifying accessibility.
document.addEventListener("keydown", e => {
  if (e.key === "Tab") {
   setIsKeyboardUser(true);
  }
});
document.addEventListener("click", e => {
  // Pressing ENTER on buttons triggers a click event with coordinates to 0
  setIsKeyboardUser(!e.screenX && !e.screenY);
});

document.addEventListener("mousedown", e => {
  setIsKeyboardUser(false);
});

body:not(.keyboardUser) *:focus {
  outline: none;
}

<p>By default, you'll see no outline. But press TAB key and you'll see focussed element</p>
<button>This is a button</button>
<a href="#">This is anchor link</a>
<input type="checkbox" />
<textarea>textarea</textarea>
<select/>

Snippet'i genişlet

— Tom Esterez
kaynak

Bu kapsamlı bir yaklaşımdır. clickDinleyici hoş bir dokunuş olduğunu.

— Keith DC

4

Tüm cevapları denedim ve bulana kadar hala Mobil'de çalışmamı alamadım -webkit-tap-highlight-color.

Benim için işe yarayan şey ...

* { -webkit-tap-highlight-color: transparent; }

— Oneezy
kaynak

1

Aradığım çözüm bu. Bu özellikle li

— Anand G

3

Bu kodu kullanın:

input:focus {
    outline: 0;
}

— Touhid Rahman
kaynak

3

Benimle çalışan tek çözüm

input[type="text"]:focus{
     box-shadow: 0 0 0 rgb(255, 255, 255);
}

 input[type="checkbox"]:focus{
      box-shadow: 0 0 0 rgb(255, 255, 255);
 }

— Ali Al Amine
kaynak

2

Firefox'ta hiçbir çözüm benim için çalışmadı.

Aşağıdaki çözüm, Firefox için odaktaki kenarlık stilini değiştirir ve diğer tarayıcılar için anahattı yok olarak ayarlar.

Odak kenarlığını 3 piksellik mavi bir ışıltıdan, metin alanı kenarlığına uyan bir kenarlık stiline dönüştürdüm. İşte bazı kenarlık stilleri:

Kesik kenarlık (kenarlık 2 piksel kesik kırmızı):

Sınır yok! (sınır 0 piksel):

Textarea kenarlığı (kenarlık 1 piksel düz gri):

İşte kod:

input:focus, textarea:focus {
    outline: none; /** For Safari, etc **/
    border:1px solid gray; /** For Firefox **/
}

#textarea  {
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  width:calc(100% - 20px);
  height:160px;
  display:inline-block;
  margin-top:-0.2em;
}

<textarea id="textarea">yo</textarea>

Snippet'i genişlet

— 1.21 gigawatt
kaynak

1

Bunu da deneyebilirsiniz

input[type="text"] {
outline-style: none;
}

veya

.classname input{
outline-style: none;
}

— Santosh Khalse
kaynak

1

Metin / giriş kutuları çevresindeki turuncu veya mavi kenarlığı (anahat) aşağıdakileri kullanarak kaldırabilirsiniz: anahat: yok

input {
    background-color: transparent;
    border: 0px solid;
    height: 20px;
    width: 160px;
    color: #CCC;
    outline:none !important;
}

— Rizo
kaynak

0

Aşağıdaki CSS özelliğini kullanarak, odak öğe üzerindeyken anahattı kaldırın:

input:focus {
    outline: 0;
}

Bu CSS özelliği, odaktaki tüm giriş alanları için anahattı kaldırır veya aşağıdaki CSS özelliğini kullanarak öğenin anahattını kaldırmak için sözde sınıf kullanır.

.className input:focus {
    outline: 0;
}

Bu özellik, seçilen öğenin anahattını kaldırır.

— Shailesh
kaynak

0

Bunu dene

*:focus {
    outline: none;
}

Bu, sayfalarınız boyunca etkili olur

— subindas pm
kaynak