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.

css input safari webkit border użytkownik170579
źródło

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.

Cᴏʀʏ
źródło

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

marcjae
źródło

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/

Boaz - Przywróć Monikę
źródło

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:

Pokaż fragment kodu

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>

Rozwiń 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.

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.

Pokaż fragment kodu

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>

Rozwiń fragment kodu

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.

Pokaż fragment kodu

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>

Rozwiń 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

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

Rozwiń fragment kodu

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

Pokaż fragment kodu

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

Rozwiń fragment kodu

Więc ustaliliśmy, co następuje

Kontury są brzydkie
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)

Pokaż fragment kodu

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>

Rozwiń 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

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

Rozwiń 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

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>

Rozwiń fragment kodu

Haz Kode
źródło

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

Rikard Askelöf
źródło

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!

1010
źródło

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

Rozwiń fragment kodu

Tom Esterez
źródło

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

Oneezy
źródło

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

Użyj tego kodu:

input:focus {
    outline: 0;
}

Touhid Rahman
źródło

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

Ali Al Amine
źródło

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):

Bez granic! (obramowanie 0px):

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>

Rozwiń fragment kodu

1,21 gigawata
źródło

1

Możesz także tego spróbować

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

lub

.classname input{
outline-style: none;
}

Santosh Khalse
źródło

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

Rizo
źródło

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.

Shailesh
źródło

0

Spróbuj tego

*:focus {
    outline: none;
}

Miałoby to wpływ na wszystkie strony

subindas pm
źródło

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

Odpowiedzi:

Jest to wspólny problem.

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

Więc jaka jest odpowiedź?