Привіт, шановні Новомосковсктелі! Продовжую, на сторінках даного блогу, ділитися з вами своїм досвідом верстки та розробки сайтів. І в цій невеликій статті хочеться розповісти вам про те, як прибрати пунктирну рамку навколо посилань при кліці (а точніше при отриманні фокусу). Про що власне кажучи мова? Давайте по подробней!
У деяких браузерах, зокрема такому популярному браузері як FireFox, можна виявити якусь особливість, а саме те, що при кліці на посилання або кнопку, в елемента, при отриманні фокусу (тобто відразу після кліка) з'являється невелика пунктирна рамка, ось як це виглядає:
Погодьтеся, виглядає не дуже, особливо сильно така рамка кидається в очі, коли клацаєш по великому заголовку в якого властивість line-height задано менше ніж встановлено за замовчуванням, що призводить до того що пунктирні лінії перетинаються.
Як же подолати цю проблему? Ви здивуєтеся наскільки все просто, вирішується це завдання буквально кількома рядками коду:
Тут ми для всіх посилань, які отримують фокус задаємо спеціальне властивість outline: none. точніше ми це властивість не задаємо, а скасовуємо. Що взагалі означає властивість outline ви можете почитати окремо. Я лише скажу коротко, що ця властивість дуже схоже на border. різниця тільки в тому, що рамка задана outline не впливає на розмір елемента і її (рамку) не можна задати для якоїсь однієї сторони, задається вона тільки для всього елемента.
Ось власне і все, що потрібно зробити. Після того як ви збережете свою таблицю стилів, ніякої рамки при кліці по посиланню вже не буде. Як бачите все елементарно.
Це все, що мені хотілося вам розповісти, тепер ви знаєте як прибрати пунктирну рамку навколо посилань. сподіваюся ця інформація допоможе вам при верстці ваших проектів. Хай щастить.