Jak usunąć podświetlenie obramowania na wprowadzanym elemencie tekstowym

Aby usunąć go ze wszystkich wejść

input {
 outline:none;
}

Jest to stary wątek, ale w celach informacyjnych ważne jest, aby pamiętać, że wyłączenie konturu elementu wejściowego nie jest zalecane, ponieważ utrudnia to dostępność.

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

Użyj tego kodu:

input:focus {
    outline: 0;
}

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

*:focus {
outline: none;
}

To usunie niebieską obwódkę!

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

Jest to częsty problem.

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

Zobacz na przykład:

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>

Najczęstszą "poprawką", którą najbardziej polecam, jest outline:none - która jeśli zostanie użyta nieprawidłowo - jest katastrofą dla dostępności.

Więc...jaki jest pożytek z obrysu?

Jestbardzo sucha Strona znalazłem, który wyjaśnia wszystko dobrze.

It zapewnia wizualną informację zwrotną dla linków, które mają "focus", gdy poruszanie się po dokumencie Internetowym za pomocą klawisza TAB (lub równoważnego). To jest szczególnie przydatne dla osób, które nie mogą korzystać z myszy lub mają wizualny / align = "left" / Jeśli usuniesz kontur, który tworzysz na swojej stronie niedostępne dla tych ludzi.

Ok, wypróbujmy ten sam przykład jak powyżej, Teraz użyj klawisza TAB do nawigacji.

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>

Zauważ, jak możesz stwierdzić, gdzie ostrość jest nawet bez klikania wejścia?

Teraz spróbujmy outline:none na naszej zaufanej <input>

Więc jeszcze raz użyj klawisza TAB, aby nawigować po kliknięciu tekstu i zobaczyć, co się stanie.

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>

Widzisz, jak trudniej jest zorientować się, gdzie jest ostrość? Jedynym znakiem mówiącym jest miganie kursora. Mój przykład powyżej jest zbyt uproszczony. W realnych sytuacjach nie miałbyś tylko jednego elementu na stronie. Coś więcej na ten temat to.

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

Teraz porównaj to z tym samym szablonem, jeśli zachowamy kontur:

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

Więc ustaliliśmy następujące

1. kontury są brzydkie
Usunięcie ich utrudnia życie.

Więc jaka jest odpowiedź?

Usuń brzydki kontur i dodaj własne wskazówki wizualne, aby wskazać ostrość.

Oto bardzo prosty przykład o co mi chodzi.

Usuwam kontur i dodaję dolną ramkę na : focus i : active. Usuwam również domyślne obramowania z górnej, lewej i prawej strony, ustawiając je na przezroczyste na :focus i :active (osobiste preferencje)

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>

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

Można to jeszcze rozszerzyć o korzystanie z zewnętrznych bibliotek, które opierają się na idei modyfikowania "konturu", a nie usuwania go całkowicie tak, jak Materialize {26]}

Możesz skończyć z czymś, co nie jest brzydkie i działa z bardzo małym wysiłkiem

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>

Możesz spróbować również

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

Lub

.classname input{
outline-style: none;
}

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żywa pseudo klasy, aby usunąć kontur elementu za pomocą poniższej właściwości CSS.

.className input:focus {
    outline: 0;
} 

Ta właściwość usuwa obrys wybranego elementu.

Usuwanie wszystkich stylów ostrości jest złe dla użytkowników dostępności i klawiatury w ogóle. Ale kontury są brzydkie, a zapewnienie niestandardowego, skoncentrowanego stylu dla każdego elementu interaktywnego może być prawdziwym bólem.

Więc 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, pokazujemy kontury, a jeśli użyje myszki, ukrywamy je.

To nie powstrzymuje cię od pisania niestandardowych style ostrości 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/>

Próbowałem wszystkich odpowiedzi i nadal nie mogłem dostać moje do pracy na Mobile , dopóki nie znalazłem -webkit-tap-highlight-color.

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

To było mylące mnie przez jakiś czas, dopóki nie odkryłem, że linia nie jest ani granicą, ani konturem, to był cień. Więc 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;
}

Spróbuj również

.form-group input {

  display: block;
  background: none;
  padding: 0.175rem 0.175rem 0.0875rem;
  font-size: 1.4rem;
  border-width: 0;
  border-color: transparent;
  line-height: 1.9;
  width: 100%;
  color: #ccc;
  transition: all 0.28s ease;
  box-shadow: none;

}

Żadne z rozwiązań nie działało u mnie w Firefoksie.

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

Skutecznie zmieniłem obramowanie ostrości z niebieskiego blasku 3px na styl obramowania pasujący do obramowania obszaru tekstowego. Oto kilka stylów obramowania:

Przerywana granica (border 2px przerywana czerwona):

Textarea border (border 1px solid gray):

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>

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

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