Google Chrome> Текстовые поля> Желтая рамка при активации ..? - PullRequest
43 голосов
/ 06 октября 2010

Сегодня я модифицировал форму и тестировал ее в Chrome. Я заметил, что при выборе текстового поля с рамкой: 0 или нет, оно все равно ставит желтую рамку вокруг него. Кто-нибудь знает способ избавиться от этой границы? Обычно меня это не беспокоит, но с используемой цветовой схемой это выглядит ужасно.

Заранее спасибо.

С уважением,

Richard

PS Я тоже пытался использовать! Важное, на случай, если что-то еще устанавливает желтое поле в CSS.

Ответы [ 2 ]

75 голосов
/ 06 октября 2010

Это вызвано контуром , а не границей.Конкретный стиль, который вы видите, определен в таблице стилей пользовательского агента (браузера).

Я согласен, что большой выделенный контур Chrome во многих случаях выглядит плохо, хотя и показывает, какое поле активно.


По состоянию на начало 2014 года подсветка теперь синего цвета (вместо желтого), а эффект подсветки стал меньше.Следующие инструкции по-прежнему действительны для изменения этого стиля.


Удаление структуры

Вы можете установить outline: none; для любого элемента, чтобы полностью удалить выделение.

input[type="text"], input[type="password"] { outline: none; }

Это потенциально (вероятно) снижает доступность / удобство использования.Существует даже веб-сайт, посвященный угрозам полного удаления контура.

Стилизация контура

Лучшей альтернативой является стилизация контура, чтобы он оставался видимым.но менее неприятный.См. https://developer.mozilla.org/en-US/docs/CSS/outline

Демонстрация: http://jsfiddle.net/G28Gd/2/

INPUT[type="text"]:focus,
INPUT[type="number"]:focus,
INPUT[type="email"]:focus,
INPUT[type="search"]:focus,
INPUT[type="password"]:focus,
INPUT[type="range"]:focus
{
    outline: 1px solid #0033dd;    
}​

Ожидания пользователя

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

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

Помните, что якоря HTML также могут получать фокус и что их контур также может быть стилизован.Это может быть полезным для пользователя.

Визуальный рендеринг

Контур, созданный со свойствами контура, рисуется «над» окном, т. Е. Контур всегда сверхуи не влияет на положение или размер ящика или любых других ящиков.Поэтому отображение или подавление контуров не вызывает перекомпоновки или переполнения.

Контур может быть применен к любому элементу (опять же, убедитесь, что не запутывает пользователя).

В отличие от границ, они не влияют на положение или размер коробки.Это важно, например, при показе, что якорь имеет фокус;если вы добавите границу к якору, весь блок будет заметно смещен на размер границы ( попробуйте ).Для сравнения, контур не будет сдвигать окно.

Одним из недостатков этой независимости от блоков является то, что контур не всегда отображается точно там, где вы ожидаете. Замененные элементы могут отображаться способами (сейчас или в будущем), которые могут не выглядеть хорошо с определенным стилем выделения.<input type="range"> является хорошим кандидатом для просмотра этого поведения.

enter image description here

Этот контур функционален, но не очень красив или даже выровнен правильно (Chrome 26-29).


В настоящее время элементы кнопок (Chrome 21) выглядят неправильно с указанным контуром (попробуйте и посмотрите - контур не следует за краем кнопки).

Теперь кажется, что контуры правильно выровнены с краями кнопки, начиная с Chrome 26.

7 голосов
/ 06 октября 2010

Это outline, а не граница;Используйте свойство CSS outline.

...