Styling the Button Element with Sliding Doors

[nrocco]

http://www.filamentgroup.com/lab/buttonElement/

qualcuno potrebbe dirmi come togliere l'outline da questo esempio? Con Firefox viene visualizzato l'outline a metà del pulsante... non è il massimo!

Ho provato a settare i vari:
outline:none;
-moz-outline: none;

ma senza successo.

Qualche consiglio?

Grazie.
Ciao

[thomas_anderson]

ciao!
non usare mai un'estensione proprietaria quando il browser supporta quella standard. è sconsigliato. scrivi:

input[type="submit"]:focus {outline-style: none;}

se vuoi togliere il focus da tutto:

* {outline-style: none}

[nrocco]

Grazie della risposta... però non funziona...

quello usato nella tecnica del link citato è un button non un input, ho provato:
button:focus {outline-style: none;}

e anche
* {outline-style: none;}

ma nessun risultato positivo.
X ora ho tanponato mettendo un onclick="this.blur()"... ma una soluzione css sarebbe meglio!

[H5N1_Aviaria]

Sicuro sia un outline e non un border?
Hai provato con border: 0 none?

[nrocco]

si, sicuro... basta che provi a visitare il sito linkato nel primo post con Firefox e lo vedi tu stesso il problema....

A me sembra un outline... fatemi sapere che ne pensate!

http://www.filamentgroup.com/lab/buttonElement/

[H5N1_Aviaria]

Ho capito cosa intendi per outline!
Si tratta dle famoso focus tratteggiato di Firefox.
Per eliminarlo hai bisogno di ricorrere a javascript per scatenare l'evento blur in concomitanza dell'evento focus.

elemento.onclick = function(){
blur();
}
elemento.onfocus = function(){
blur();
return false;
}

[H5N1_Aviaria]

Aggiunta: i problemi con gli outline dei link li risolvo con i CSS, ma con i button (che fra l'altro non uso) devo ricorrere a questo stratagemma.
Difatti pur utilizzando

button.submitBtn span {
outline-color:invert;
outline-style:none;
outline-width:medium;
}

Il codice non sortisce l'effetto desiderato.
Questa precisazione è dovuta per non essere tacciato come utilizzatore indebito di javascirpt!

[edit] Ho appena provato *{outline:none;} e niente da fare.

[thomas_anderson]

*:focus {outline-style: none}

ho dimenticato di specificare la pseudo-classe :focus.

[nrocco]

ringrazio tutti per gli interventi... molto utili...

Comunque... sono passato a questa tecnica:
http://www.oscaralexander.com/tutori...-with-css.html

molto simile alla precedente ma usa "<a>" al posto di <button>.

Secondo voi... pregi e difetti delle 2 tecniche?

[H5N1_Aviaria]

Originariamente inviato da thomas_anderson
ho dimenticato di specificare la pseudo-classe :focus.

E io no?
Quando si gira intorno ad un problema...

@nrocco: entrambe le tecniche hanno, secondo me, una limitazione (non presente nella versione originale di sliding doors http://www.alistapart.com/d/slidingdoors/v1/ex6.html ma solo per un furbo espediente): il mancato adattamento in altezza rispetto alla dimensione del carattere.
Inoltre sostituire un input o un button con a fa perdere al form la sua natura e viene stravolta la semantica del documento.