Рамка вокруг ссылок

Posted on by Рамиль Юналиев

Многие знают и видят, что вокруг html элементов когда он в фокусе появляется рамка. Меня если честно она бесит, вот так это можно убрать. Вообще считаю что нужно для всех браузеров, ее по умолчанию не выводить.

: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;
}

Для 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;
 }

6 thoughts on “Рамка вокруг ссылок”

  1. А теперь попробуйте табуляцией пройтись по ссылкам. Где аутлайн? Нет аутлайна.

    Видел где то другое решение, там этот момент был учтен.

  2. На счет перехода с таба думаю актуально только для элементов форм. По ссылкам не думаю что кто-то ходит. С помощью css не видел такого решения. Были на JS но с той же проблемой. Для jQuery

    jQuery(document).ready(function(){
    jQuery(«input»).focus(
    function(){
    this.blur();
    });
    });

    Если кто знает напишите, добавлю.

  3. Чет у меня ничего не получилось.
    :focus {outline: none;} Это в css вставлять? Или куда?

      1. Да вот нифигашечки не получается, пробовала снова…. Этот код же для радио тоже, да?

Comments are closed.