Удалить текстовый ввод Safari / Chrome / текстовое свечение

337

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

Алек Смарт
источник
6
@ Steve, еще одна причина отключить его, если вы хотите, чтобы эффект свечения работал во всех браузерах, используя: focus вместо плохо поддерживаемого стиля контура.
Langdon
90
Это действительно раздражает, когда люди начинают философский разговор о том, является ли что-то «правильным», когда вопрос технический.
Тим
2
Я делаю электронную таблицу в Интернете, Стив, так что она подойдет для моего использования. Это зависит, но если это просто простая форма, вы должны оставить схему как есть.
william44isme
4
Я думаю, что вполне нормально отключить его и сделать кастом: эффект фокуса с помощью css ...
ithil
Кроме того, знание того, как что-то отключить, не означает, что это необратимо. Любой, кто работает с любым клиентом, знает, что он может захотеть увидеть что-то визуализированное одним способом, а затем переключить его обратно на оригинальный / стандартный способ. Их лекция о доступности не изменит это желание и не сделает кого-либо счастливым.
JakeGould

Ответы:

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

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

Вы также можете использовать псевдоэлемент ': focus' для нацеливания на входы только тогда, когда пользователь выбрал их.

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

AJM
источник
2
Отлично, большое спасибо. Также интересно, могу ли я удалить опцию изменения размера текстовой области (в правом нижнем углу текстовой области)?
Алек Смарт
3
+1 за осторожность; пожалуйста, постарайтесь избегать любых действий, которые нарушают ожидания пользователя относительно работы его платформы; вы можете нанести вред их производительности и сделать ваш веб-сайт более сложным в использовании.
Роб
6
Удалите мою опцию изменения размера chrome / safari textarea на свой страх и риск! Я считаю это действительно полезным, незаменимым даже на некоторых сайтах.
JeeBee
5
для избавления от ручки изменения размера: resize: нет;
Даниэль
22
нет коробка-тень: нет;
стикс
92

Этот эффект может возникать и на не входных элементах. Я нашел следующие работы в качестве более общего решения

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

Обновление: возможно, вам не придется использовать :focusселектор. Если у вас есть элемент, скажем <div id="mydiv">stuff</div>, и вы получили внешнее свечение от этого элемента div, просто примените как обычно:

#mydiv {
  outline-color: transparent;
  outline-style: none;
}
Карл У
источник
Это работает, например, для <button>элементов, которые не особенно выигрывают от свечения на фокусе, так как в основном вы все равно нажимаете на него.
Касимир
1
Принятый ответ не работал для меня на Chrome на OSX. Это решение сделало свою работу.
Барт
Кроме того, используя эту технику, вы можете сохранить фокус, но переопределите значение контура, чтобы оно было сплошным цветом по вашему выбору и т. Д., Чтобы соответствовать стилю вашего сайта, если его удаление полностью не является удовлетворительным.
Нил Монро
1
У меня не работала последняя версия chrome45.0.2454.101 m
J86
Этот ответ от @ Carl-W не следует упускать из виду! - Это было полезно при использовании jQuery для ссылки на якорь, который был div. Я перезагружал iframe в div, затем вручную переходил на якорь без перезагрузки. Это прокрутило бы страницу вниз до якоря, но у всего div было синее внешнее свечение. Добавил этот CSS в элемент div, и это сработало! - ПРИМЕЧАНИЕ: я не использовал :focusдля селектора, я просто поставил outline-colorи outline-styleна моем диве css.
Уэйд
13

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

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

resize: none;

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

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

-webkit-appearance: none;
Томас Маас
источник
3
Кроме того , можно разрешить изменение размеров только в одном направлении, что может исправить его взаимодействие с некоторой разметкой без отключения его полностью: возможные значения для изменения размера являются none, both, horizontal, verticalи inherit.
Boann
Мне нравится решение, предлагаемое здесь с -webkit-Appearance: none; - удаляет ВСЕ стили из элементов ввода, так что вы можете стилизовать их, как вам нужно. Спасибо!
Hanazair
Я не знаю, почему это так много голосов, это не ответ на вопрос вообще.
паддотк
7

Карл W :

Этот эффект может возникать и на не входных элементах. Я нашел следующие работы в качестве более общего решения

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

Я объясню это:

  • :focusозначает, что это стили элементов, которые находятся в фокусе. Итак, мы разрабатываем элементы в фокусе.
  • outline-color: transparent; означает, что голубое свечение прозрачно.
  • outline-style: none; делает то же самое.
MineCMD
источник
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;
}
vamsikrishnamannem
источник
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>
criss_ae
источник
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;   
   }
Сантош Халсе
источник