Сегодня я менял форму и тестировал ее в Chrome. Я заметил, что при выборе текстового поля с рамкой: 0 или none, он по-прежнему помещает вокруг него желтую рамку. Кто-нибудь знает, как избавиться от этой границы? Я обычно не был таким, что беспокоился, но это выглядит ужасно с использованием цветовой схемы, которую я использую.
Спасибо заранее.
Привет,
Ричард
PS Я тоже старался использовать! важно, если что-то еще устанавливает границу в желтый цвет в CSS.
Это вызвано outline, а не границей. Определенный стиль, который вы видите, определен в таблице стилей пользователя (браузера).
Я согласен с тем, что во многих случаях хром большой, выделенный контур выглядит плохо, хотя он делает очевидным, какое поле активно.
По состоянию на начало 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"> является хорошим кандидатом для наблюдения за этим поведением.
Этот контур функциональный, но не очень красивый или даже правильно выровненный (Chrome 26-29).
Элементы кнопок в настоящее время (Chrome 21) выглядят корректно с указанием контура (попробуйте его и посмотрите - контур не будет следовать краю кнопки).
Теперь контуры выравниваются по краям кнопки с Chrome 26.
Это outline, а не граница; Используйте свойство CSS структуры.