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

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

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

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

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

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

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

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

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

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

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

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

resize: none;

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

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

-webkit-appearance: none;

Карл W :

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

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

Я поясню це:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

input.slidingdoorbutton:focus { outline: none;}

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

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

    }

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

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

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

І

 *{
     outline: none;   
   }