Як видалити межу підкреслення на вхідному текстовому елементі

610

Коли HTML-елемент "зосереджений" (на даний момент вибраний / вкладений в), багато браузерів (принаймні Safari та Chrome) накладають навколо нього синю межу.

Для макета, над яким я працюю, це відволікає увагу і не виглядає правильно.

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

Firefox, здається, не робить цього, або, принаймні, дозволить мені контролювати це за допомогою:

border: x;

Якщо хтось може сказати мені, як працює IE, мені було б цікаво.

Отримати Safari, щоб прибрати цю маленьку спалах, було б непогано.

— user170579
джерело

1096

У вашому випадку спробуйте:

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

Майте на увазі, що контур фокусу є функцією доступності та зручності використання; він підказує користувача на те, на який елемент зараз зосереджено.

— Cᴏʀʏ
джерело

10

Спасибі Кори, чудова порада. Вам також потрібно призначити CSS textarea, щоб охопити всі поля введення. input:focus, textarea:focus {outline: none;}

— BaronGrivet

7

не забудьте вибрати такожselect:focus {outline:none;}

— Geek Num 88

2

Є також <button>тег, який, серед іншого, використовує інтерфейс jQuery та Twitter Bootstrap, тому я доповнив button: focusйого списком для повноти.

— Кріс Партон

1

На мій досвід, це може статися без уваги, і в такому випадку мені довелося це застосуватиbutton, button:focus { outline:none; }

— Майк Ліон

1

@ Cᴏʀʏ Ви б не хотіли перенести замітку про a11y та зручність у верхній частині свого питання? IMO, це значно покращить вашу відповідь, оскільки видалення функцій a11y є поганою практикою.

— Йозеф Енгельфрост

64

Щоб видалити його з усіх входів

input {
 outline:none;
}

— marcjae
джерело

31

Це стара нитка, але для довідки важливо зазначити, що вимкнення контуру вхідного елемента не рекомендується, оскільки це заважає доступності.

Властивість контуру є з якоїсь причини - надає користувачам чітку індикацію фокусування клавіатури. Для подальшого читання та додаткових джерел з цього приводу див. Http://outlinenone.com/

— Боаз - Відновлення Моніки
джерело

1

Boaz, FYI input.middle {outline: none} все одно дозволить вам пройти елементи (включаючи input.middle). Якщо натиснути клавішу вкладки, буде також зосереджено тег введення. Єдине, що ви не зможете побачити фокус (контур фокусу) на ньому. Тож не так шкідливо його використовувати ..

— :)

11

@AnishNair Only thing is that you won't be able to see the focus(outline focus) on it- і це якраз моя думка. Видалення контуру вимикає візуальну індикацію події фокусування, а не фактичну подію. Видалення візуальної індикації означає, що ви ускладнюєте особам з обмеженими можливостями, які покладаються на цю ознаку.

— Боаз - Відновіть Моніку

2

Іноді нам потрібно йти на компроміс, щоб чогось досягти

— :)

6

@AnishNair True. Але більш ніж часто люди, які читають цю тему, віддають перевагу легкому виходу (тобто outline:none;), не враховуючи наслідків. Тільки тому, що щось легко і економить час, не означає, що це найкраща практика :)

— Boaz - Відновіть Моніку

5

Я запізнююсь на обговорення, але ви все ще можете стилізувати сфокусований стан вхідних даних (як-от зміна кольору рамки чи ширини). Поки ви пам’ятаєте про доступність під час цього (хороший контраст тощо), він доступний так само, як контури за замовчуванням.

— Мег

18

Це спільна проблема.

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

Дивіться це для прикладу:

Показати фрагмент коду

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>

Розгорніть фрагмент

Отже, ми встановили наступне

Обриси некрасиві
Видалення їх ускладнює життя.

То яка відповідь?

Видаліть некрасиві контури та додайте власні візуальні підказки, щоб вказати на фокус.

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

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

Показати фрагмент коду

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>

Розгорніть фрагмент

Це можна продовжити, використовуючи зовнішні бібліотеки, які грунтуються на ідеї зміни "контуру" на відміну від видалення його повністю як Materialize

Ви можете закінчити щось, що не є негарним і працює з дуже невеликими зусиллями

Показати фрагмент коду

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>

Розгорніть фрагмент

— Я хаз-код
джерело

18

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

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

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

— Рікард Аскельоф
джерело

6

Ви можете використовувати CSS, щоб вимкнути це! Це код, який я використовую для відключення синьої межі:

*:focus {
outline: none;
}

Це видалить синю межу!

Це робочий приклад: JSfiddle.net

Сподіваюся, це допомагає!

— 1010
джерело

4

Видалення всіх стилів фокусування погано для доступності та користувачів клавіатури загалом. Але обриси некрасиві, і надання індивідуального сфокусованого стилю для кожного окремого інтерактивного елемента може бути справжнім болем.

Тож найкращий компроміс, який я знайшов, - це показувати стилі контуру лише тоді, коли ми виявляємо, що користувач використовує клавіатуру для навігації. В основному, якщо користувач натискає 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/>

Розгорніть фрагмент

— Том Естерез
джерело

Це ретельний підхід. clickСлухач приємно торкатися.

— Кіт DC

4

Я спробував усі відповіді, і досі не зміг заставити свою роботу над мобільним , поки не знайшов -webkit-tap-highlight-color.

Отже, що для мене спрацювало ...

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

— Oneezy
джерело

1

Це рішення, яке я шукав. Це особливо корисно, коли ви переживаєте сенсорний екран з такими елементами, як li

— Anand G

3

Використовуйте цей код:

input:focus {
    outline: 0;
}

— Тухід Рахман
джерело

3

Єдиний розчин, який працював зі мною

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

— Алі Аль Амін
джерело

2

Жодне з рішень не працювало для мене у Firefox.

Наступне рішення змінює стиль межі на фокус для Firefox і встановлює контур не для інших браузерів.

Я ефективно змусив межу фокусування перейти від синього світіння 3 пікселя до стилю межі, який відповідає межі області тексту. Ось кілька стилів кордону:

Пунктирна рамка (червона облямівка 2 пікселя):

Без кордону! (межа 0px):

Бордюр текстової області (облямівка 1 px суцільно-сірий):

Ось код:

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>

Розгорніть фрагмент

— 1,21 гігаватт
джерело

1

Ви можете спробувати і це

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

або

.classname input{
outline-style: none;
}

— Сантош Халсе
джерело

1

Ви можете видалити помаранчеву або синю межу (контур) навколо полів тексту / вводу, скориставшись: orline: none

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

— Різо
джерело

0

Видаліть контур, коли фокус знаходиться на елементі, використовуючи нижче властивість CSS:

input:focus {
    outline: 0;
}

Це властивість CSS видаляє контур для всіх полів вводу на фокусі або використовувати псевдоклас для видалення контуру елемента за допомогою властивості нижче CSS.

.className input:focus {
    outline: 0;
}

Це властивість видаляє контур вибраного елемента.

— Шайлеш
джерело

0

Спробуйте це

*:focus {
    outline: none;
}

Це вплине на ваші сторінки

— субінди вечора
джерело