Jak usunąć wyróżnienie ramki na wejściowym elemencie tekstowym


610

Kiedy element HTML jest „skoncentrowany” (aktualnie wybrany / w kartach), wiele przeglądarek (przynajmniej Safari i Chrome) umieści wokół niego niebieską ramkę.

Dla układu, nad którym pracuję, jest to rozpraszające i nie wygląda dobrze.

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

Firefox chyba tego nie robi, a przynajmniej pozwoli mi to kontrolować za pomocą:

border: x;

Gdyby ktoś mógł mi powiedzieć, jak działa IE, byłbym ciekawy.

Przydałoby się Safari, aby usunąć tę odrobinę flary.

Odpowiedzi:


1096

W twoim przypadku spróbuj:

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

Lub ogólnie, aby wpływać na wszystkie podstawowe elementy formularza:

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

W komentarzach Noah Whitmore zasugerował, aby posunąć to jeszcze dalej, aby wspierać elementy, dla których contenteditableustawiono atrybut true(skutecznie czyniąc z nich rodzaj elementu wejściowego). Te również powinny być skierowane na te (w przeglądarkach obsługujących CSS3):

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

Chociaż nie poleciłbym tego, dla kompletności, zawsze możesz wyłączyć zarys skupienia na wszystkim za pomocą tego:

*:focus {
    outline: none;
}

Należy pamiętać, że zarys koncentruje się na funkcji dostępności i użyteczności; podpowiada użytkownikowi, na który element jest aktualnie skupiony.


10
Dzięki Cory, świetna wskazówka. Musisz także przypisać CSS do obszaru tekstowego, aby obejmował wszystkie pola wprowadzania. input:focus, textarea:focus {outline: none;}
BaronGrivet

7
nie zapomnij również wybraćselect:focus {outline:none;}
Geek Num 88

2
Jest też <button>tag, który jest używany między innymi przez jQuery UI i Twitter Bootstrap, więc button: focusdla kompletności dodam do listy.
Chris Parton

1
Z mojego doświadczenia wynika, że ​​może się to zdarzyć bez skupienia, w którym to przypadku musiałem to zastosowaćbutton, button:focus { outline:none; }
Mike Lyons

1
@ Cᴏʀʏ czy miałbyś coś przeciwko przeniesieniu notatki na temat a11y i użyteczności na samą górę pytania? IMO znacznie poprawiłoby twoją odpowiedź, ponieważ usunięcie a11y jest złą praktyką.
Josef Engelfrost

64

Aby usunąć go ze wszystkich danych wejściowych

input {
 outline:none;
}

31

Jest to stary wątek, ale w celach informacyjnych należy zauważyć, że wyłączenie konturu elementu wejściowego nie jest zalecane, ponieważ utrudnia dostęp.

Właściwość konturu istnieje nie bez powodu - zapewnia użytkownikom wyraźne wskazanie fokusu na klawiaturze. Więcej informacji i dodatkowe źródła na ten temat można znaleźć na stronie http://outlinenone.com/


1
Boaz, FYI input.middle {zarys: brak} nadal pozwoli ci przechodzić przez elementy (w tym input.middle). Naciśnięcie klawisza tab również skupi się na znaczniku wejściowym. Jedyną rzeczą jest to, że nie będziesz w stanie zobaczyć na nim fokusu (konturu fokusu). Więc używanie go nie jest tak szkodliwe ..
:)

11
@AnishNair Only thing is that you won't be able to see the focus(outline focus) on it- i właśnie o to mi chodzi. Usunięcie konturu wyłącza wizualne wskazanie zdarzenia skupienia, a nie rzeczywiste zdarzenie. Usunięcie wskazania wizualnego oznacza, że ​​utrudniasz osobom niepełnosprawnym, które polegają na tym wskazaniu.
Boaz - Przywróć Monikę

2
Czasami musimy iść na kompromis, aby coś osiągnąć
:)

6
@AnishNair True. Ale bardziej niż często ludzie czytający ten wątek wolą łatwe wyjście (tj. outline:none;) Bez rozważania konsekwencji. Tylko dlatego, że coś jest łatwe i oszczędza czas, nie oznacza, że ​​jest to najlepsza praktyka :)
Boaz - Przywróć Monikę

5
Spóźniłem się do dyskusji, ale nadal możesz stylizować stan skupienia danych wejściowych (np. Zmienić kolor lub szerokość obramowania). Tak długo, jak robisz to, mając na uwadze dostępność (dobry kontrast itp.), Jest ona tak samo dostępna, jak domyślne kontury.
Meg

18

Jest to wspólny problem.

Domyślny zarys renderowany przez przeglądarki jest brzydki.

Zobacz na przykład:


Najczęstszą „poprawką”, która najbardziej poleca, jest outline:none- która przy nieprawidłowym użyciu - katastrofa z powodu dostępności.


Więc ... jaki użytek ma zresztą zarys?

Jest bardzo sucho strona cięcie znalazłem który wyjaśnia wszystko dobrze.

Zapewnia wizualną informację zwrotną dla linków, które mają „fokus” podczas poruszania się po dokumencie internetowym za pomocą klawisza TAB (lub odpowiednika). Jest to szczególnie przydatne dla osób, które nie mogą używać myszy lub mają zaburzenia widzenia. Jeśli usuniesz kontur, Twoja witryna będzie niedostępna dla tych osób.

Ok, wypróbujmy ten sam przykład jak powyżej, teraz użyj TABklawisza do nawigacji.

Zauważ, jak rozpoznać, gdzie jest fokus, bez klikania danych wejściowych?

A teraz spróbujmy outline:nonenaszych zaufanych<input>

Po raz kolejny użyj TABklawisza do nawigacji po kliknięciu tekstu i zobacz, co się stanie.

Widzisz, jak trudniej jest ustalić, na czym koncentruje się? Jedynym znamiennym znakiem jest miganie kursora. Mój przykład powyżej jest zbyt uproszczony. W rzeczywistych sytuacjach na stronie nie ma tylko jednego elementu. Coś więcej w tym zakresie.

Porównajmy to z tym samym szablonem, jeśli zachowamy kontur:

Więc ustaliliśmy, co następuje

  1. Kontury są brzydkie
  2. Ich usunięcie utrudnia życie.

Więc jaka jest odpowiedź?

Usuń brzydki kontur i dodaj własne wizualne wskazówki wskazujące na skupienie.

Oto bardzo prosty przykład tego, co mam na myśli.

Usuwam kontur i dodam dolną ramkę na : focus i : active . Usuwam również domyślne obramowania u góry, po lewej i prawej stronie, ustawiając je jako przezroczyste na : focus i : active (preferencje osobiste)

Tak więc próbujemy powyższego podejścia na naszym przykładzie „z prawdziwego świata” z wcześniejszego okresu:

Można to dodatkowo rozszerzyć, stosując biblioteki zewnętrzne, które opierają się na idei modyfikacji „konturu” w przeciwieństwie do usuwania go całkowicie jak w Materialise

Możesz skończyć z czymś, co nie jest brzydkie i działa przy niewielkim wysiłku


18

Przez pewien czas było to mylące, dopóki nie odkryłem, że linia nie jest ani ramką, ani konturem, to był cień. Aby go usunąć, musiałem użyć tego:

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

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

6

Możesz użyć CSS, aby to wyłączyć! Oto kod, którego używam do wyłączania niebieskiej ramki:

*:focus {
outline: none;
}

Spowoduje to usunięcie niebieskiej ramki!

To działający przykład: JSfiddle.net

Mam nadzieję, że to pomoże!


4

Usunięcie wszystkich stylów ustawiania ostrości jest niekorzystne dla ułatwień dostępu i ogólnie dla użytkowników klawiatury. Ale kontury są brzydkie, a zapewnienie niestandardowego stylu dla każdego elementu interaktywnego może być prawdziwym bólem.

Najlepszym kompromisem, jaki znalazłem, jest pokazanie stylów konturu tylko wtedy, gdy wykryjemy, że użytkownik używa klawiatury do nawigacji. Zasadniczo, jeśli użytkownik naciśnie TAB, pokażemy kontury i jeśli użyje myszy, ukryjemy je.

Nie powstrzymuje cię to od pisania niestandardowych stylów fokusu dla niektórych elementów, ale przynajmniej zapewnia dobrą domyślną.

Tak to robię:

// 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/>


To jest dokładne podejście. clickSłuchacz jest miłym akcentem.
Keith DC

4

Próbowałem wszystkich odpowiedzi i nadal nie mogłem zmusić mojej do pracy na komórce , dopóki nie znalazłem -webkit-tap-highlight-color.

Tak więc dla mnie zadziałało ...

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

1
To jest rozwiązanie, którego szukałem. Jest to szczególnie przydatne, gdy korzystasz z ekranu dotykowego z elementami takimi jak li
Anand G


3

Jedyne rozwiązanie, które ze mną współpracowało

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);
 }

2

Żadne z rozwiązań nie działało dla mnie w przeglądarce Firefox.

Poniższe rozwiązanie zmienia styl ramki dla ogniska dla Firefoksa i ustawia kontur na brak dla innych przeglądarek.

Skutecznie sprawiłem, że ramka ostrości zmieniła się z niebieskiego blasku 3px na styl ramki pasujący do ramki obszaru tekstowego. Oto kilka stylów obramowania:

Linia przerywana (linia 2px przerywana na czerwono): Linia przerywana.  obramowanie 2px przerywana na czerwono

Bez granic! (obramowanie 0px):
Bez granic.  obramowanie: 0px

Obramowanie pola tekstowego (obramowanie 1px jednolity szary): Obramowanie pola tekstowego.  obramowanie 1px jednolity szary

Oto 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>


1

Możesz także tego spróbować

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

lub

.classname input{
outline-style: none;
}

1

Możesz usunąć pomarańczową lub niebieską ramkę (kontur) wokół pól tekstowych / wejściowych, używając: kontur: brak

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

0

Usuń kontur, gdy fokus jest na elemencie, używając poniższej właściwości CSS:

input:focus {
    outline: 0;
}

Ta właściwość CSS usuwa kontur dla wszystkich pól wejściowych na fokusie lub użyj pseudoklasy, aby usunąć kontur elementu za pomocą poniższej właściwości CSS.

.className input:focus {
    outline: 0;
} 

Ta właściwość usuwa kontur dla wybranego elementu.


Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.