Пунктирная рамка

Как убрать пунктирную рамку вокруг ссылок?

Убрать пунктирную рамку, которая появляется при получении ссылкой фокуса.

Решение

При активации ссылок некоторые браузеры добавляют вокруг них пунктирную рамку. Она предназначена для привлечения внимания и демонстрации текущего фокуса.

Вид пунктирной рамки при получении фокуса

Тем не менее, некоторые разработчики хотели бы убрать эту рамку, чтобы сделать сайт однообразным в различных браузерах. Для этого следует к селектору A добавить стилевое свойство outline со значением none (пример 1).

HTML5 CSS 2.1 IE Cr Op Sa Fx

       
Google
  

В данном примере у всех ссылок на сайте прячется пунктирная рамка, отображаемая при активации ссылок.

HTML по теме

CSS по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

• Как добавить картинку на веб-страницу?
• Как добавить иконку сайта в адресную строку браузера?
• Как добавить фоновый рисунок на веб-страницу?
• Как сделать обтекание картинки текстом?
• Как растянуть фон на всю ширину окна?
• Как выровнять фотографию по центру веб-страницы?
• Как разместить элементы списка горизонтально?
• Как убрать подчеркивание у ссылок?
• Как убрать маркеры в маркированном списке?
• Как изменить расстояние между строками текста?
• Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
• Как открыть ссылку в новом окне?

Источник

Несколько примеров работы с CSS: устранение обводки полей в некоторых браузерах и выделение правил для Internet Explorer

Не мне вам объяснять, что разные браузеры работают по-разному. Одним из ярких примеров является поведение текстовой формы при вводе логина или комментария — в Google Chrome и Safari она обводится. Если дизайн вашего блога сильно контрастирует с этим, то можно убрать принудительную обводку, применив простое правило.

Как устранить обводку активных полей в браузерах на движке WebKit

Для этого добавьте в style.css такое правило:

Теперь когда какой-нибудь элемент, в котором нужно вводить текст, получит фокус, то Safari не будет обводить его голубой, а Google Crome желтой рамкой.

Как добавлять правила для предыдущих версий Internet Explorer

Описанное выше правило будет работать только в тех браузерах, которые перехватывают фокус, в Internet Explorer 6 они не работают. Однако есть много загвоздок, связанных со старыми версиями IE, и если под нее писать отдельное оформление, то можно легко запутаться. Гораздо проще вставлять в работающий код правила, которые будут работать только в Internet Explorer, тем более, что выделить их визуально очень легко. Есть определенные символы, вставляя которые перед условием, мы делаем его понятным только определенной версии IE. Пример:

Это гораздо проще, чем писать отдельные блоки для каждой версии Internet Explorer.

Источник

Убираем пунктирную рамку вокруг элементов в фокусе

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

Теория

Замечали наверное, что при клике по кнопке или ссылке, вокруг этих элементов появляется пунктирная рамка.

Это функция браузера, которая выделяет элемент для большего удобства пользователя. Вроде эта рамка никому особо не мешает, но вот незадача — она не всегда вписывается в задумку дизайнера и приходиться от нее избавляться.

Решение с помощью CSS

Убираем рамку вокруг ссылок

Для ссылок все просто — добавляем в начало основного или reset.css правило:

Убираем рамку вокруг кнопок

button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner 

Убираем рамку вокруг input type=»radio»

Детальней об этом можно прочитать тут.

:focus < -moz-outline: 3px solid #fff !important; >input[type=»radio»]:focus

Убираем рамку вокруг input type=»checkbox»

Решение с помощью Javascript

Добавляем в HTML элементу, у которого хотим убрать рамку onfocus=»this.blur();».

• нельзя попасть на элемент с помощью клавиатуры (tab обход)
• работает только при включенном Javascript
• «загрязняет» код

Более привлекательный вариант с точки зрения чистоты кода — подключить скрипт:

 . onload = function() < a_tags=document.getElementsByTagName("input") for (i=0;i> function blur_links() . 

 .   . 

Заметка

Update 23.01.2011 Помни, что убирая дефолтную рамку фокуса, хорошей практикой является замена эквивалентом в стиле дизайна.

• «Дергание» сайта
• background position со смещением
• Clearfix — очищение потока элементов с сохранением структурной верстки
• CSS хаки для IE6, IE7, Opera, Firefox, Safari, Chrome
• RGBA — CSS полупрозрачность
• Кроссбраузерная CSS прозрачность (opacity)
• Кроссбраузерное полупрозрачное затемнение фона
• Кроссбраузерный
  

  ---

  | толщина линии, цвет, отступы, выравнивания, бордюры, фон

• Кроссбраузерный
  

  ---

  | толщина линии, цвет, отступы, выравнивания, бордюры, фон

• Обнуление отступов (margin / padding) с помощью универсального селектора
• Порядок описания ссылок
• Предварительная загрузка изображений
• Сброс стилей с помощью CSS | Reset CSS с комментариями
• Сокращения в CSS | минимизируем CSS код
• Убираем пунктирную рамку вокруг элементов в фокусе с помощью CSS и Javascirpt
• Условные CSS — намного круче, чем условные комментарии
• Условные комментарии

Источник

Как убрать обводку при нажатие на button?

Войдите, чтобы написать ответ

Div для секции с отзывами неправильно выравнивается с Bootstrap. Как решить эту проблему?

Настройка шрифта HTML + CSS?

Почему при публикации проекта на git pages в браузере отображается файл readme?

Почему Джанго не подгружает картинку в CSS и браузер выдает ошибку 404?

Можно ли округлить число в CSS или какой костыль можно придумать?

Почему код для замены текста в кнопке один работает, а второй нет, кто понимает разницу?

Почему bottom:0 не работает?

Как вывести строку с Rust в HTML с помощью Tauri?

В css для header, а он не изменяется. Можете указать на ошибки?

Возможно ли повторить эффект заливки градиентом на стилях?

Минуточку внимания

• Как мне вставить картинку в word файл через python с определенным форматированием?
  • 2 подписчика
  • 0 ответов
  • 3 подписчика
  • 1 ответ
  • 3 подписчика
  • 2 ответа
  • 3 подписчика
  • 2 ответа
  • 2 подписчика
  • 0 ответов
  • 2 подписчика
  • 2 ответа
  • 2 подписчика
  • 3 ответа
  • 2 подписчика
  • 1 ответ
  • 2 подписчика
  • 0 ответов
  • 2 подписчика
  • 1 ответ

  Источник

  Убрать браузерную обводку css

  

  Создание игр на Unreal Engine 5

  Данный курс научит Вас созданию игр на Unreal Engine 5. Курс состоит из 12 модулей, в которых Вы с нуля освоите этот движок и сможете создавать самые разные игры.

  В курсе Вы получите всю необходимую теоретическую часть, а также увидите массу практических примеров. Дополнительно, почти к каждому уроку идут упражнения для закрепления материала.

  Помимо самого курса Вас ждёт ещё 8 бесплатных ценных Бонусов: «Chaos Destruction», «Разработка 2D-игры», «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства», «Создание прототипа RPG с открытым миром» и и весь курс «Создание игр на Unreal Engine 4» (актуальный и в 5-й версии), включающий в себя ещё десятки часов видеоуроков.

  Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

  

  Подписаться

  

  Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

  

  Подписаться

  

  Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

  

  Мой аккаунт Моя группа

  Источник