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.
input:focus, textarea:focus {outline: none;}
select:focus {outline:none;}
<button>
tag, który jest używany między innymi przez jQuery UI i Twitter Bootstrap, więcbutton: focus
dla kompletności dodam do listy.button, button:focus { outline:none; }
Aby usunąć go ze wszystkich danych wejściowych
źródło
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/
źródło
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.outline:none;
) Bez rozważania konsekwencji. Tylko dlatego, że coś jest łatwe i oszczędza czas, nie oznacza, że jest to najlepsza praktyka :)Jest to wspólny problem.
Domyślny zarys renderowany przez przeglądarki jest brzydki.
Zobacz na przykład:
Pokaż fragment kodu
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.
Ok, wypróbujmy ten sam przykład jak powyżej, teraz użyj
TAB
klawisza do nawigacji.Pokaż fragment kodu
Zauważ, jak rozpoznać, gdzie jest fokus, bez klikania danych wejściowych?
A teraz spróbujmy
outline:none
naszych zaufanych<input>
Po raz kolejny użyj
TAB
klawisza do nawigacji po kliknięciu tekstu i zobacz, co się stanie.Pokaż fragment kodu
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.
Pokaż fragment kodu
Porównajmy to z tym samym szablonem, jeśli zachowamy kontur:
Pokaż fragment kodu
Więc ustaliliśmy, co następuje
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)
Pokaż fragment kodu
Tak więc próbujemy powyższego podejścia na naszym przykładzie „z prawdziwego świata” z wcześniejszego okresu:
Pokaż fragment kodu
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
Pokaż fragment kodu
źródło
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:
źródło
Możesz użyć CSS, aby to wyłączyć! Oto kod, którego używam do wyłączania niebieskiej ramki:
Spowoduje to usunięcie niebieskiej ramki!
To działający przykład: JSfiddle.net
Mam nadzieję, że to pomoże!
źródło
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ę:
źródło
click
Słuchacz jest miłym akcentem.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 ...
źródło
Użyj tego kodu:
źródło
Jedyne rozwiązanie, które ze mną współpracowało
źródło
Ż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):
Bez granic! (obramowanie 0px):
Obramowanie pola tekstowego (obramowanie 1px jednolity szary):
Oto kod:
źródło
Możesz także tego spróbować
lub
źródło
Możesz usunąć pomarańczową lub niebieską ramkę (kontur) wokół pól tekstowych / wejściowych, używając: kontur: brak
źródło
Usuń kontur, gdy fokus jest na elemencie, używając poniższej właściwości CSS:
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.
Ta właściwość usuwa kontur dla wybranego elementu.
źródło
Spróbuj tego
Miałoby to wpływ na wszystkie strony
źródło