Usuwanie obramowania klikniętych linków CSS

Czas czytania: 2 minut

Usuwanie obramowania klikniętych linków jest dosyć proste i nie wymaga jakieś dużej wiedzy z CSS lub HTML.

Używając określenia obramowanie linka mam na myśli ramkę tworzącą się czasem wokół podlinkowanego obiektu kiedy na niego klikniemy. Przeważnie jest to niebieska, modrakowa ramka otaczająca np. podlinkowany obrazek, przycisk lub tekst. Obramowanie to jest ustawieniem domyślnym.

Wiem problem dla wielu jest trywialny i z pewnością nie warty poruszania mimo to sprawia wielu osobą dużo kłopotów.

Ustawienia, cechy linków w CSS

Każdy obiekt HTML w tym także link posiada kilka opcji a właściwie stanów w którym aktualnie przebywa. Dla większości obiektów są one ustawione jako domyślnie nieaktywne (np. dlatego nic się nie dzieje jeśli najedziemy kursorem myszy na zwykły obrazek). Jednak sprawa wygląda trochę inaczej w przypadku linków – one posiadają włączoną opcję różnych stanów. Każdy ten stan wprowadza też w linku jaką zmianę (często drobną prawie nie zauważalną). 

Jakie stany może przyjąć obiekt

Do najczęściej spotykanych stanów należą:

• :hover – obiekt ma ten stan kiedy najedziemy na niego kursorem myszy
• :focus – obiekt zyskuje ten stan w momencie kliknięcia lub dotknięcia elementu
• :active – obiekt będzie posiadać ten stan w momencie aktywowania danego elementu przez użytkownika
• :visited – obiekt ma ten stan np. w sytuacji kiedy nasza przeglądarka pamięta, że otworzyliśmy ten link

Do tych konkretnych stanów możemy się odwołać w następujący sposób np.:

a:active {}
a:visited {} 
a:hover {}
a:focus {}

Nieco więcej na ten temat możecie poczytać w innym wpisie.

Do każdego z tych stanów są ustawione nieco inne ustawienia domyślne w przeglądarkach. Przeważnie jest to dodanie podkreślenia po najechaniu na linka lub właśnie obramowanie kiedy np. otwieramy link w drugim oknie. O ile z tym pierwszym łatwo sobie poradzić gdyż winowajcę łatwo znaleźć to już z skasowaniem obramowaniem jest gorzej.

Usuwanie obramowania – przykład

Dobrym przykładem zastosowania oddziaływania przez stany może być niebieskie obramowanie pojawiające się np. kiedy otworzymy link w innym oknie. W celu usunięcia obramowania wystarczy dodać do linka właściwość outline:

outline: none;

Powinno to rozwiązać problem permanentnie. Ramka ta bowiem ma niewiele wspólnego z właściwością „border”.

Przykładowe zastosowanie (usunięcie obramowania dla wszystkich linków):

a{
    outline: none;
}

Jeżeli powyższy kod nie pomoże warto sprawdzić czy na link nie nałożono jeszcze innych atrybutów.