Как убрать выделение границы на элементе ввода текста - PullRequest
Новая
       88

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

531 голосов
/ 22 сентября 2009

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

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

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

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

border: x;

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

Было бы неплохо заставить Safari убрать эту маленькую вспышку.

Ответы [ 14 ]

972 голосов
/ 22 сентября 2009

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

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

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

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

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

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

Хотя я бы не советовал, для полноты картины вы всегда можете отключить контур фокуса на все с помощью этого: 

*:focus {
    outline: none;
}

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

56 голосов
/ 23 марта 2011

Чтобы удалить его со всех входов 

input {
 outline:none;
}
25 голосов
/ 30 декабря 2012

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

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

10 голосов
/ 24 августа 2017

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

По умолчанию контур , который отображает браузер, выглядит ужасно.

См. Это, например: 

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, который при неправильном использовании является катастрофой для доступности.

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

Есть очень сухой сайт Я нашел, что все объясняет хорошо.

Обеспечивает визуальную обратную связь для ссылок, которые имеют «фокус» навигация по веб-документу с помощью клавиши 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>

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

Вы можете получить что-то не уродливое и работающее без особых усилий 

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>
8 голосов
/ 24 апреля 2018

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

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

    outline:none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}
4 голосов
/ 16 сентября 2017

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

Итак, лучший компромисс, который я нашел, - показывать стили контура только тогда, когда мы обнаруживаем, что пользователь использует клавиатуру для навигации. По сути, если пользователь нажимает клавишу 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/>
4 голосов
/ 23 февраля 2016

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

*:focus {
outline: none;
}

Это удалит синюю рамку!

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

Надеюсь, это поможет!

3 голосов
/ 05 апреля 2018

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

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

* { -webkit-tap-highlight-color: transparent; }
3 голосов
/ 23 мая 2013

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

input:focus {
    outline: 0;
}
2 голосов
/ 11 мая 2018

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

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

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

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

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

Текстовая граница (граница 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>
Страница:
...