- завдання
- теорія
- Рішення за допомогою CSS
- Прибираємо рамку навколо кнопок
- Прибираємо рамку навколо input type = "radio"
- Прибираємо рамку навколо input type = "checkbox"
- Рішення за допомогою Javascript
Підготував: Євген Рижков Дата публікації: 31.01.2009
завдання
Позбутися від пунктирною рамки навколо елементів, які отримали фокус (посилання, кнопки, чексбокси, радіобатони).
теорія
Чи помічали напевно, що при кліці по кнопці або посиланням, навколо цих елементів з'являється пунктирна рамка.
Це функція браузера, яка виділяє елемент для більшої зручності користувача. Начебто ця рамка нікому особливо не заважає, але от біда - вона не завжди вписується в задумку дизайнера і припадати від неї позбавлятися.
Рішення за допомогою CSS
Прибираємо рамку навколо посилань
Для посилань все просто - додаємо в початок основного або reset.css правило:
: Focus {outline: none; }
Прибираємо рамку навколо кнопок
метод подсмотрен тут .
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 {/ * * / border: none; }
Працює для < button > І для < input >.
Прибираємо рамку навколо input type = "radio"
Детальніше про це можна прочитати тут .
: Focus {-moz-outline: 3px solid #fff! Important; } Input [type = "radio"]: focus {-moz-outline-radius: 12px! Important; -moz-outline-offset: 0px! important; }
Прибираємо рамку навколо input type = "checkbox"
input [type = "checkbox"]: focus {-moz-outline-offset: -1px! important; -moz-outline: 1px solid # 000! important; }
Рішення за допомогою Javascript
Додаємо в HTML елементу, у якого хочемо прибрати рамку onfocus = "this.blur ();".
<Button type = "button" onfocus = "this.blur ();"> Кнопка </ button> <input type = "file" onfocus = "this.blur ();" />
плюси:
- все просто
- працює майже для всіх елементів
недоліки:
- не можна потрапити на елемент за допомогою клавіатури (tab обхід)
- працює тільки при включеному Javascript
- «Забруднює» код
Більш привабливий варіант з точки зору чистоти коду - підключити скрипт:
<Head> ... <script type = "text / javascript"> onload = function () {a_tags = document.getElementsByTagName ( "input") for (i = 0; i <a_tags.length; i ++) {a_tags [i ] .onfocus = blur_links}} function blur_links () {this.blur ()} </ script> ... </ head>
З бібліотекою jQuery:
<Head> ... <script type = "text / javascript" src = "path-to / jquery.js"> </ script> <script type = "text / javascript"> jQuery (document) .ready (function ( ) {jQuery ( "input"). focus (function () {this.blur ();});}); </ Script> ... </ head>
Update 23.01.2011 Пам'ятай, що прибираючи дефолтну рамку фокусу, гарним вибором заміна еквівалентом в стилі дизайну.