Как сбросить / убрать подсветку входа / границу фокуса? [Дубликат]

274

Я видел, что хром помещает более толстую рамку на :focus, но в моем случае это выглядит как-то, где я использовал пограничный радиус. Есть ли способ удалить это?

Изображение 362

Теги:
google-chrome
focus
border

8 ответов

571
Лучший ответ

Вы можете удалить его с помощью

outline: none;

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

  • 5
    я изменил background-color и свойства / атрибуты color (как бы вы это ни называли) на :focus так что я думаю, все еще в порядке
  • 8
    Ага. Глобальная настройка outline: none как это делают некоторые операции сброса, не является ошибкой, поскольку ухудшает доступность клавиатуры, но хорошо удалить outline если у вас есть другой четкий способ отражения фокусировки.
Показать ещё 3 комментария
84

Мне пришлось сделать все, чтобы полностью удалить его.

outline-style:none;
box-shadow:none;
border-color:transparent;
  • 17
    Это должен быть главный ответ, единственный, который полностью удаляет тень / границу в фокусе.
  • 3
    Единственное решение, которое работает
Показать ещё 5 комментариев
72

Чтобы удалить фокус по умолчанию, используйте в файле по умолчанию default.css следующее:

:focus {outline:none;}

Затем вы можете контролировать цвет рамки фокусировки либо индивидуально по элементу, либо по умолчанию .css:

:focus {outline:none;border:1px solid red}

Очевидно, замените red на ваш выбранный шестнадцатеричный код.

Вы также можете оставить рамку нетронутой и управлять цветом фона (или изображением), чтобы выделить поле:

:focus {outline:none;background-color:red}

: -)

17

Это определенно сработает. Оранжевый контур больше не появится. Общие для всех тегов:

*:focus {
    outline: none;
   }

Конкретный для некоторого тега, ex: тег ввода

input:focus{
   outline:none;
  }
11
border:0;
outline:none;
box-shadow:none;

Это должно сделать трюк.

7

Самый простой способ - использовать что-то подобное, но обратите внимание, что это может быть не так хорошо.

input {
  outline: none;
}

Надеюсь, вы сочтете это полезным.

7

вы можете просто установить outline: none; и направить на другой цвет в фокусе.

6

Проблема заключается в том, что у вас уже есть контур. Chrome все еще что-то меняет, и это настоящая боль. Я не могу найти, что изменить:

.search input {
  outline: .5em solid black;
  width:41%;
  background-color:white;
  border:none;
  font-size:1.4em;
  padding: 0 0.5em 0 0.5em;
  border-radius:3px;
  margin:0;
  height:2em;
}

.search input:focus, .search input:hover {
  outline: .5em solid black !important;
  box-shadow:none;
  border-color:transparent;;
 }

.search button {
  border:none;
  outline: .5em solid black;
  color:white;
  font-size:1.4em;
  padding: 0 0.9em 0 0.9em;
  border-radius: 3px;
  margin:0;
  height:2em;
  background: -webkit-gradient(linear, left top, left bottom, from(#4EB4F8), to(#4198DE));
  background: -webkit-linear-gradient(#4EB4F8, #4198DE);
  background: -moz-linear-gradient(top, #4EB4F8, #4198DE);
  background: -ms-linear-gradient(#4EB4F8, #4198DE);
  background: -o-linear-gradient(#4EB4F8, #4198DE);
  background: linear-gradient(#4EB4F8, #4198DE);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4EB4F8', endColorstr='#4198DE');
  zoom: 1;
}

Изображение 4997Изображение 4998

Ещё вопросы

Сообщество Overcoder
Наверх
Меню