Visualizzazione dei risultati da 1 a 10 su 10
  1. #1

    Styling the Button Element with Sliding Doors

    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

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

    codice:
    input[type="submit"]:focus {outline-style: none;}
    se vuoi togliere il focus da tutto:

    codice:
    * {outline-style: none}

  3. #3
    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!

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

  5. #5
    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/

  6. #6
    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.
    codice:
    elemento.onclick = function(){
    blur();
    }
    elemento.onfocus = function(){
    blur();
    return false;
    }

  7. #7
    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
    codice:
    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.

  8. #8
    codice:
    *:focus {outline-style: none}
    ho dimenticato di specificare la pseudo-classe :focus.

  9. #9
    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?

  10. #10
    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.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2026 vBulletin Solutions, Inc. All rights reserved.