Как удалить выделение границы на входном текстовом элементе

когда html-элемент "сфокусирован" (в настоящее время выбран/вложен в), многие браузеры (по крайней мере Safari и Chrome) поместят синюю границу вокруг него.

для макета, над которым я работаю, это отвлекает и не выглядит правильно.

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

FireFox, похоже, не делает этого или, по крайней мере, позволит мне управлять им с помощью

border: x;

Если кто-то может сказать мне, как IE работает, мне было бы любопытно.

но получение Safari для удаления этого немного вспышки было бы неплохо.

14 ответов


в вашем случае, попробуйте:

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

или вообще, чтобы влиять на все основные элементы формы:

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

в комментариях Ноя Уитмор предложил принять это еще дальше, чтобы поддержать элементы, которые имеют значение true (эффективно делая их типом входного элемента). Следующее также должно быть нацелено на них (в браузерах с поддержкой CSS3):

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

хотя я бы не рекомендовал его, для полноты" саке, вы всегда можете отключить Контур Фокуса на все С этого:

*:focus {
    outline: none;
}

имейте в виду, что Контур Фокуса является функцией доступности и удобства использования; он подсказывает пользователю, какой элемент в настоящее время сосредоточен.


снять его со всех входов

input {
 outline:none;
}

Это старый поток, но для справки важно отметить, что отключение контура входного элемента не рекомендуется, поскольку это препятствует доступности.

свойство outline существует по причине-предоставление пользователям четкого указания фокуса клавиатуры. Для дальнейшего чтения и дополнительных источников по этому вопросу см. http://outlinenone.com/


используйте этот код:

input:focus {
    outline: 0;
}

вы можете использовать CSS, чтобы отключить это! Это код, который я использую для отключения синей границы:

*:focus {
outline: none;
}

это удалит синюю границу!

это рабочий пример:JSfiddle.net

надеюсь, что это помогает!


это общая проблема.

по умолчанию контур что браузеры оказывают некрасиво.

см. это, например:

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>

самые распространенные "исправить", что большинство рекомендую outline:none - что, если используется неправильно-это катастрофа для доступности.


так...в любом случае, какая польза от контура?

здесь очень сухой веб-сайт I нашел, что все объясняет.

он обеспечивает визуальную обратную связь для ссылок, которые имеют "фокус", когда навигация по веб-документу с помощью клавиши TAB (или эквивалента). Это особенно полезно для людей, которые не могут использовать мышь или визуально ухудшение. Если вы удалите контур, который вы создаете на своем сайте недоступные для этих людей.

Хорошо, давайте попробуем тот же пример, что и выше, теперь используйте TAB клавишу для навигации.

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>

обратите внимание, как вы можете определить, где находится фокус, даже не нажимая на вход?

теперь, давайте попробуем outline:none на нашем верном <input>

Итак, еще раз, используйте TAB клавиша для навигации после нажатия на текст и посмотреть, что произойдет.

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>

видите, как труднее понять, где находится фокус? Единственным указательным знаком является курсор мигающий. Мой пример выше слишком упрощен. В реальных ситуациях у вас не будет только одного элемента на странице. Что-то в этом роде.

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

теперь сравните это с тем же шаблоном, если мы сохраняем фрагмент:

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

таким образом, мы установили следующее

  1. контуры уродливой
  2. удаление их делает жизнь более трудный.

Так каков же ответ?

удалите уродливый контур и добавьте свои собственные визуальные сигналы, чтобы указать фокус.

вот очень простой пример того, что я имею в виду.

я удаляю контур и добавляю нижнюю границу на :фокус и :активный. Я также удаляю границы по умолчанию на верхней, левой и правой сторонах, устанавливая их прозрачными на :фокус и :активный (личное предпочтение)

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>

это можно расширить, используя внешние библиотеки, которые основываются на идее изменения "контура", а не на его полном удалении, как материализовать

вы можете что-то не безобразно и работает с очень небольшим усилием

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>

Вы можете попробовать это

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

или

.classname input{
outline-style: none;
}

удалите контур, когда фокус находится на элементе, используя свойство CSS ниже:

input:focus {
    outline: 0;
}

это свойство CSS удаляет контур для всех полей ввода в фокусе или использует псевдо-класс для удаления контура элемента, используя свойство ниже CSS.

.className input:focus {
    outline: 0;
} 

Это свойство удаляет контур для выбранного элемента.


удаление всех стилей фокусировки плохо для доступности и пользователей клавиатуры в целом. Но контуры уродливы и предоставление пользовательского сфокусированного стиля для каждого интерактивного элемента может быть настоящей болью.

поэтому лучший компромисс, который я нашел, - показать стили контура только тогда, когда мы обнаруживаем, что пользователь использует клавиатуру для навигации. В принципе, если пользователь нажимает TAB, мы показываем контуры, а если он использует мышь, мы их скрываем.

Это не останавливает вас от написание пользовательских стилей фокуса для некоторых элементов, но, по крайней мере, обеспечивает хорошее значение по умолчанию.

вот как я это делаю:

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

Я пробовал все ответы, и я все еще не мог заставить мой работать на мобильный, пока я не нашел -webkit-tap-highlight-color.

Итак,что сработало для меня...

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

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

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

попробуйте это

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

}

ни одно из решений работал для меня в Firefox.

следующее решение изменяет стиль границы в фокусе для Firefox и устанавливает контур в none для других браузеров.

Я эффективно сделал границу фокуса перейти от синего свечения 3px к стилю границы, который соответствует границе области текста. Вот некоторые стили границы:

пунктирная граница (граница 2px пунктирная Красная): Dashed border. border 2px dashed red

нет границ! (граница 0px):
No border. border:0px

граница Textarea (граница 1px сплошной серый): Textarea border. border 1px solid gray

вот код:

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>

вы можете удалить оранжевую или синюю границу (контур) вокруг текстовых / входных полей с помощью:контур:нет

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