Удалить текстовый ввод 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;
}

Изменение размера текстовой области в браузерах на основе webkit:

Установка max-height и max-width на textarea не приведет к удалению визуального маркера изменения размера. Пытаться:

resize: none;

(и да, я согласен с «стараться избегать любых действий, которые нарушают ожидания пользователя», но иногда это имеет смысл, например, в контексте веб-приложения)

Чтобы настроить внешний вид элементов формы webkit с нуля:

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