Tratteggio intorno al LINK selezionato
Oggi parliamo di CSS e di quel tratteggio che compare cliccando sopra un immagine, una scritta o un bottone contrassegnato da un a href (link attivo verso un’ altra pagina o file).
Esso delimita l’ area di appartenenza dell’ a href, a volte con pessimi risultati estetici, come ad esempio nel caso di un logo nel template del sito che riporta alla home (sistema usato convenzionalmente in tutti i BLOG).
Per ovviare a questo tratteggio, nel caso lo si voglia eliminare, basterà aggiungere nel CSS all’ a di rferimento del nostro link:
a{
outline: none;
}Nel caso invece il bordo intorno al link lo vogliamo tenere, possiamo formattarlo:
outline-color (colore)
outline-style (none, dotted, dashed, solid, double, groove, ridge, inset, outset)
outline-width (thin, medium, thick, misura lunghezza)
Ringrazio Karedas che sul forum di Giorgio Tave mi ha suggerito questa soluzione.
Io finora l’ ho testata sui browser Mozilla, Explorer e Chrome e funziona su tutti e tre.
Articoli correlati
- 203 pacchetti di ICONE GRATIS
- Personalizzare LIGHTBOX e WP-SLIMBOX2
- WordPress base64_decode
- Script Php per immagine in una sola pagina
- Autofill Forms di Mozilla Firefox
6 Commenti
ti faccio notare che questo metodo funziona anche per eliminare il bagliore che appare attorno ai campi di testo, che magari in un modulo elaborato della ricerca, è totalmente rovinoso.
L’ ho provato sul campo di ricerca di GVLab, funziona
tnx
Volendo ce un modo anche per togliere il tratteggio che apapre quando si clicca su un pulsante di input, sempre tramite css. In questo caso non basta definire l’outline, ma bisogna inserire un codice piu complesso, esttamente questo:
input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner
{ border : 0px; }
Interessante…ma funziona su tutti i browser o solo su Firefox?
Si tratta di css3?
Bhe se ci fai caso solo firefox visualizza i puntini sui link, questo è solo per firefox. Non è css3, ma anche se lo fosse firefox lo supporta, e dato che solo lui mostra i puntini piena compatibilità
ah e ovviamente questo vale per i tasti input di tipo submit e reset (come indicato nel codice) per altri tipi di input bisogna aggiungere altre righe cambiando il “type”