Видаліть текстове введення тексту та текстові відблиски Safari / Chrome


337

Мені цікаво, чи можливо видалити синє та жовте світіння за замовчуванням, коли натискаю на область введення / введення тексту за допомогою CSS?


6
@Steve, ще одна причина його відключення - якщо ви хочете, щоб ефект світіння працював у всіх браузерах, використовуючи: фокус замість неправильно підтримуваного стилю контуру.
Ленґдон

90
Це дійсно прикро, коли люди починають філософську розмову про те, чи є щось "правильне робити", коли питання є технічним.
Тім

2
Я готую електронну таблицю, Стів, так що це було б доречно для мого використання. Це залежить, але якщо це просто проста форма, то слід залишити контур таким, яким він є.
william44isme

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

Також знання того, як відключити щось не означає, що це незворотно. Кожен, хто працює для будь-якого клієнта, знає, що, можливо, вони захочуть побачити щось, зроблене в один бік, а потім переключити його на вихідний / за замовчуванням. Навчання їх доступності не змінить цього бажання і не зробить когось щасливим.
JakeGould

Відповіді:


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

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

Ви також можете використовувати псевдоелемент ": focus" для націлювання на входи лише тоді, коли користувач обрав їх.

Демо: https://jsfiddle.net/JohnnyWalkerDesign/xm3zu0cf/


2
Ідеально, дуже дякую. Також цікаво, чи можу я також видалити варіант зміни розміру textarea (в нижній правій частині textarea)?
Алек Смарт

3
+1 для обережності; будь ласка, намагайтеся уникати нічого, що порушує сподівання користувача на ефективність роботи їх платформи; ви насправді можете завдати шкоди їх продуктивності та зробити ваш веб-сайт більш складним у використанні.
Роб

6
Видаліть мій варіант зміни розміру chrome / safari textarea на власну небезпеку! Я вважаю це дійсно корисним, незамінним навіть на деяких сайтах.
JeeBee

5
для позбавлення від ручки зміни розміру: resize: none;
Даніель

22
коробка-тінь: жодна;
стикс

92

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

:focus {
  outline-color: transparent;
  outline-style: none;
}

Оновлення: можливо, вам не доведеться використовувати :focusселектор. Якщо у вас є елемент, скажімо <div id="mydiv">stuff</div>, і ви отримували зовнішнє сяйво на цьому елементі Div, просто застосуйте як звичайне:

#mydiv {
  outline-color: transparent;
  outline-style: none;
}

Це працює, наприклад, для <button>елементів, які не особливо корисні від зосередження фокусу, оскільки в основному ви все одно натискаєте на нього.
kasimir

1
Прийнята відповідь не працювала для мене в Chrome на OSX. Це рішення зробило роботу.
Барт

Використовуючи цю техніку, ви можете підтримувати фокус, але переосмислити значення контуру, щоб він став суцільним кольором на ваш вибір тощо, щоб відповідати стилю вашого веб-сайту, якщо його видалення зовсім не задовільне.
Ніл Монро

1
Не працював для мене в останній версії хрому45.0.2454.101 m
J86

Цю відповідь від @ Carl-W не слід оминути увагою! - Це було корисно при використанні jQuery для посилання на якір, який був дівом. Я перезавантажував iframe в діві, потім вручну переходив на якір, не перевантажуючи його. Це прокручує сторінку вниз до якоря, але весь дів мав синє зовнішнє сяйво. Додано цей CSS на елемент div, і він працював! - ПРИМІТКА: Я не використовував :focusдля селектора, я просто помістив outline-colorі outline-styleна css свого дива.
Вейд

13

Про розмір текстових областей у веб-браузерах на веб-сайтах:

Встановлення максимальної висоти та максимальної ширини на текстовій області не зніме візуальний розмір ручки. Спробуйте:

resize: none;

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

Щоб налаштувати зовнішній вигляд елементів форми веб-кадру з нуля:

-webkit-appearance: none;

3
Крім того , можна дозволити зміну розмірів тільки в одному напрямку, що може виправити його взаємодія з деякою розміткою без відключення його повністю: можливі значення для зміни розміру є none, both, horizontal, verticalі inherit.
Боан

Мені подобається рішення, яке тут пропонується із "-webkit-izgled: none;" - видаляє ВСІ стилі з вхідних елементів, тому ви можете їх стилізувати як потрібно. Дякую!
hanazair

Я не знаю, чому це так багато відгуків, це зовсім не відповідь на питання.
paddotk

7

Карл W :

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

:focus {
  outline-color: transparent;
  outline-style: none;
}

Я поясню це:

  • :focusозначає, що він стилює елементи, які перебувають у фокусі. Тож ми стилізуємо елементи у фокусі.
  • outline-color: transparent; означає, що синє світіння прозоре.
  • outline-style: none; робить те саме.

5

Я пережив це на divподії, яка мала клік, і після 20 пошуків я знайшов цей фрагмент, який врятував мені день.

-webkit-tap-highlight-color: rgba(0,0,0,0);

Це вимикає підсвічування кнопок за замовчуванням у мобільних браузерах webkit


4

Це рішення для людей, які дбають про доступність .

Будь ласка, не використовуйте outline:none;для відключення контуру фокусу. Ви вбиваєте доступність Інтернету, якщо це зробите. Існує доступний спосіб зробити це.

Перегляньте цю статтю, яку я написав, щоб пояснити, як видалити межу доступним способом.

Коротше кажучи, ідея показувати межу контуру лише тоді, коли ми виявимо користувача клавіатури. Як тільки користувач починає використовувати мишу, ми відключаємо контур. В результаті ви отримуєте найкраще з двох.


2

Якщо ви хочете видалити світіння з кнопок у Bootstrap (що, на мою думку, не обов'язково погано для UX), вам знадобиться наступний код:

.btn:focus, .btn:active:focus, .btn.active:focus{
  outline-color: transparent;
  outline-style: none;
}

Дякую. .btn:active:focusнеобхідно було зняти світіння, фактично утримуючи кнопку.
homerjam

2

Це рішення спрацювало на мене.

input:focus {
    outline: none !important;
    box-shadow: none !important;
}

1

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

input:hover
input:active, 
input:focus, 
textarea:active,
textarea:hover,
textarea:focus, 
button:focus,
button:active,
button:hover
{
    outline:0px !important;
}

0
<select class="custom-select">
        <option>option1</option>
        <option>option2</option>
        <option>option3</option>
        <option>option4</option>
</select>

<style>
.custom-select {
        display: inline-block;
        border: 2px solid #bbb;
        padding: 4px 3px 3px 5px;
        margin: 0;
        font: inherit;
        outline:none; /* remove focus ring from Webkit */
        line-height: 1.2;
        background: #f8f8f8;

        -webkit-appearance:none; /* remove the strong OSX influence from Webkit */

        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
    }
    /* for Webkit's CSS-only solution */
    @media screen and (-webkit-min-device-pixel-ratio:0) { 
        .custom-select {
            padding-right:30px;    
        }
    }

    /* Since we removed the default focus styles, we have to add our own */
    .custom-select:focus {
        -webkit-box-shadow: 0 0 3px 1px #c00;
        -moz-box-shadow: 0 0 3px 1px #c00;
        box-shadow: 0 0 3px 1px #c00;
    }

    /* Select arrow styling */
    .custom-select:after {
        content: "▼";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        font-size: 60%;
        line-height: 30px;
        padding: 0 7px;
        background: #bbb;
        color: white;

        pointer-events:none;

        -webkit-border-radius: 0 6px 6px 0;
        -moz-border-radius: 0 6px 6px 0;
        border-radius: 0 6px 6px 0;
    }
</style>

0

Мені здається корисним зняти контур на кнопці введення типу "розсувні двері", оскільки контур не покриває правильний "ковпачок" зображення розсувних дверей, завдяки чому стан фокусу виглядає трохи непростим.

input.slidingdoorbutton:focus { outline: none;}

0

Мені просто потрібно було видалити цей ефект із моїх полів введення тексту, і я не міг змусити інших методів працювати цілком правильно, але це те, що працює для мене;

input[type="text"], input[type="text"]:focus{
            outline: 0;
            border:none;
            box-shadow:none;

    }

Тестували в Firefox та Chrome.


0

Звичайно! Також ви можете видалити синю межу з усіх елементів HTML за допомогою *

*{
    outline-color: transparent;
    outline-style: none;
  }

І

 *{
     outline: none;   
   }
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.