Usuń świecenie Safari / Chrome textinput / textarea

337

Zastanawiam się, czy można usunąć domyślną niebieską i żółtą poświatę po kliknięciu pola wprowadzania / obszaru tekstowego za pomocą CSS?

Alec Smart
źródło
6
@ Steve, kolejnym powodem do wyłączenia tego jest to, że jeśli chcesz, aby efekt blasku działał we wszystkich przeglądarkach, używając: focus zamiast źle obsługiwanego stylu konturu.
Langdon,
90
To naprawdę denerwujące, gdy ludzie rozpoczynają filozoficzną rozmowę na temat tego, czy coś jest „słuszne”, gdy pytanie ma charakter techniczny.
tim
2
Tworzę internetowy arkusz kalkulacyjny, Steve, więc byłby odpowiedni do mojego użytku. To zależy, ale jeśli jest to tylko prosta forma, powinieneś zostawić kontur bez zmian.
william44isme
4
Myślę, że można całkowicie wyłączyć i zrobić niestandardowy: efekt skupienia za pomocą css ...
ithil 30.10.2013
Wiedza o tym, jak coś wyłączyć, nie oznacza, że ​​jest to nieodwracalne. Każdy, kto pracuje dla dowolnego klienta, wie, że może chcieć zobaczyć coś renderowanego w jedną stronę, a następnie przełączyć go z powrotem na oryginalny / domyślny sposób. Wykładanie ich na temat dostępności nie zmieni tego pragnienia ani nie uszczęśliwi nikogo.
JakeGould,

Odpowiedzi:

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

Chociaż argumentowano, że zachowanie blasku / konturu jest w rzeczywistości korzystne dla dostępności, ponieważ może pomóc użytkownikom zobaczyć, który element jest aktualnie skupiony.

Możesz także użyć pseudoelementu „: focus”, aby kierować dane wejściowe tylko wtedy, gdy użytkownik je zaznaczy.

Demo: https://jsfiddle.net/JohnnyWalkerDesign/xm3zu0cf/

ajm
źródło
2
Idealnie, bardzo dziękuje. Zastanawiam się również, czy mogę również usunąć opcję zmiany rozmiaru pola tekstowego (w prawym dolnym rogu pola tekstowego)?
Alec Smart
3
+1 za ostrożność; należy starać się unikać wszystkiego, co robi łamie oczekiwania użytkownika, jak ich platformy preform; możesz faktycznie zaszkodzić ich produktywności i utrudnić korzystanie z witryny.
Rob
6
Usuń moją opcję zmiany rozmiaru pola tekstowego chrome / safari na własne ryzyko! Uważam to za bardzo przydatne, niezbędne nawet na niektórych stronach.
JeeBee
5
w celu pozbycia się uchwytu zmiany rozmiaru: resize: none;
Daniel
22
box-shadow: brak;
styks 24.09.2013
92

Ten efekt może wystąpić także na elementach niepochodzących z wejścia. Znalazłem następujące prace jako bardziej ogólne rozwiązanie

:focus {
  outline-color: transparent;
  outline-style: none;
}

Aktualizacja: może nie być konieczne użycie :focusselektora. Jeśli masz element, powiedzmy <div id="mydiv">stuff</div>, i otrzymujesz zewnętrzny blask na tym elemencie div, po prostu zastosuj jak normalnie:

#mydiv {
  outline-color: transparent;
  outline-style: none;
}
Carl W.
źródło
Działa to na przykład w przypadku <button>elementów, które nie korzystają szczególnie z jaśniejącego ogniskowania, ponieważ i tak najczęściej je klikasz.
kasimir
1
Akceptowana odpowiedź nie działała dla mnie w Chrome na OSX. To rozwiązanie spełniło swoje zadanie.
Bart
Korzystając z tej techniki, możesz utrzymać ostrość, ale ponownie zdefiniuj wartość konturu, aby uzyskać jednolity wybrany kolor itp., Aby pasował do stylu witryny, jeśli jej całkowite usunięcie nie jest całkowicie zadowalające.
Neil Monroe,
1
Nie działało dla mnie na najnowszej wersji chrome45.0.2454.101 m
J86
Ta odpowiedź od @ Carl-W nie powinna zostać przeoczona! - Przydało się to przy użyciu jQuery do połączenia z kotwicą, która była div. Przeładowywałem iframe w divie, a potem ręcznie szedłem do kotwicy bez przeładowywania. Przewinąłby stronę w dół do kotwicy, ale cały div miał niebieski zewnętrzny blask. Dodałem ten CSS do elementu div i działało! - UWAGA: Nie użyłem :focusselektora, po prostu umieściłem outline-colori outline-stylena css mojej div.
Wade,
13

W przypadku zmiany rozmiaru obszaru tekstowego w przeglądarkach internetowych:

Ustawienie maksymalnej wysokości i maksymalnej szerokości w obszarze tekstowym nie usunie wizualnego uchwytu zmiany rozmiaru. Próbować:

resize: none;

(i tak zgadzam się z „staraj się unikać robienia czegokolwiek, co łamie oczekiwania użytkownika”, ale czasem ma to sens, np. w kontekście aplikacji internetowej)

Aby dostosować wygląd elementów formularza od zera:

-webkit-appearance: none;
Thomas Maas
źródło
3
Możliwe jest również, aby umożliwić zmianę rozmiaru tylko w jednym kierunku, który może ustalić jego interakcji z niektórymi układami bez wyłączenia go całkowicie: możliwe wartości dla zmiany rozmiaru są none, both, horizontal, vertical, i inherit.
Boann
Podoba mi się oferowane tutaj rozwiązanie z „-webkit-wygląd: brak;” - usuwa CAŁĄ stylizację z elementów wejściowych, dzięki czemu można je stylizować według potrzeb. Dzięki!
hanazair
Nie wiem, dlaczego to ma tyle głosów poparcia, to wcale nie jest odpowiedź na pytanie.
paddotk
7

Carl W :

Ten efekt może wystąpić także na elementach niepochodzących z wejścia. Znalazłem następujące prace jako bardziej ogólne rozwiązanie

:focus {
  outline-color: transparent;
  outline-style: none;
}

Wytłumaczę to:

  • :focusoznacza, że ​​stylizuje elementy, które są w centrum uwagi. Więc projektujemy elementy w centrum uwagi.
  • outline-color: transparent; oznacza, że ​​niebieski blask jest przezroczysty.
  • outline-style: none; robi to samo.
MineCMD
źródło
5

Doświadczyłem tego podczas divzdarzenia kliknięcia i po 20 wyszukiwaniach znalazłem ten fragment, który uratował mi dzień.

-webkit-tap-highlight-color: rgba(0,0,0,0);

Wyłącza to domyślne podświetlanie przycisków w przeglądarkach mobilnych webkit

Michał
źródło
4

Jest to rozwiązanie dla osób dbających o dostępność .

Proszę nie używać outline:none;do wyłączania konturu fokusa. Jeśli to zrobisz, zabijasz dostęp do sieci. Jest dostępny sposób na to.

Sprawdź ten artykuł , który napisałem, aby wyjaśnić, jak usunąć granicę w przystępny sposób.

W skrócie chodzi o to, aby pokazać obramowanie konturu tylko wtedy, gdy wykryjemy użytkownika klawiatury. Gdy użytkownik zacznie używać myszy, wyłączamy kontur. W rezultacie otrzymujesz to, co najlepsze.

Wim Mostmans
źródło
2

Jeśli chcesz usunąć blask z przycisków w Bootstrap (co niekoniecznie jest moim zdaniem złe UX), potrzebujesz następującego kodu:

.btn:focus, .btn:active:focus, .btn.active:focus{
  outline-color: transparent;
  outline-style: none;
}
Kyle S.
źródło
Dzięki. .btn:active:focusbyło konieczne, aby usunąć poświatę, jednocześnie przytrzymując przycisk.
homerjam,
2

To rozwiązanie działało dla mnie.

input:focus {
    outline: none !important;
    box-shadow: none !important;
}
Szorstki
źródło
1

czasami zdarza się, że przyciski również następnie użyj poniżej, aby usunąć linię zewnętrzną

input:hover
input:active, 
input:focus, 
textarea:active,
textarea:hover,
textarea:focus, 
button:focus,
button:active,
button:hover
{
    outline:0px !important;
}
vamsikrishnamannem
źródło
0
<select class="custom-select">
        <option>option1</option>
        <option>option2</option>
        <option>option3</option>
        <option>option4</option>
</select>

<style>
.custom-select {
        display: inline-block;
        border: 2px solid #bbb;
        padding: 4px 3px 3px 5px;
        margin: 0;
        font: inherit;
        outline:none; /* remove focus ring from Webkit */
        line-height: 1.2;
        background: #f8f8f8;

        -webkit-appearance:none; /* remove the strong OSX influence from Webkit */

        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
    }
    /* for Webkit's CSS-only solution */
    @media screen and (-webkit-min-device-pixel-ratio:0) { 
        .custom-select {
            padding-right:30px;    
        }
    }

    /* Since we removed the default focus styles, we have to add our own */
    .custom-select:focus {
        -webkit-box-shadow: 0 0 3px 1px #c00;
        -moz-box-shadow: 0 0 3px 1px #c00;
        box-shadow: 0 0 3px 1px #c00;
    }

    /* Select arrow styling */
    .custom-select:after {
        content: "▼";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        font-size: 60%;
        line-height: 30px;
        padding: 0 7px;
        background: #bbb;
        color: white;

        pointer-events:none;

        -webkit-border-radius: 0 6px 6px 0;
        -moz-border-radius: 0 6px 6px 0;
        border-radius: 0 6px 6px 0;
    }
</style>
criss_ae
źródło
0

Uznałem, że pomocne jest usunięcie obrysu przycisku wejściowego typu „drzwi przesuwne”, ponieważ kontur nie obejmuje prawej „pokrywy” obrazu drzwi przesuwnych, przez co stan skupienia wygląda trochę niepewnie.

input.slidingdoorbutton:focus { outline: none;}
Rich Finelli
źródło
0

Musiałem tylko usunąć ten efekt z moich pól wprowadzania tekstu i nie mogłem sprawić, by inne techniki działały całkiem dobrze, ale to właśnie dla mnie działa;

input[type="text"], input[type="text"]:focus{
            outline: 0;
            border:none;
            box-shadow:none;

    }

Testowane w przeglądarce Firefox i Chrome.

Martyn Shutt
źródło
0

Pewnie! Niebieską ramkę można usunąć również ze wszystkich elementów HTML za pomocą *

*{
    outline-color: transparent;
    outline-style: none;
  }

I

 *{
     outline: none;   
   }
Santosh Khalse
źródło