Comment masquer contour sur un formulaire

Question

Je dois concevoir un formulaire avec une entrée à l'intérieur. J'utilise l'image d'arrière-plan sur l'entrée afin qu'elle ressemble à un bouton. Chaque fois que quelqu'un clique dessus, cela envoie $ POST, un comportement que je veux atteindre.

Mais le problème concerne les contours du formulaire. Le contour montre quand nous cliquons sur le formulaire. C'est mineur, mais ce serait génial de faire perdre la forme (ou l'entrée) au contour. Je l'ai testé avec Firefox 3.6 et flock. Les deux montrent le comportement de contour que je veux éviter.

<div id="hdrRight">  
    <form name="input" action="/home.html" method="post" id="buttonform" > 
     <input type="submit" value="" id="gohome" /> 
    </form> 


         
 

  
          
#----- CSS part 
#hdrRight { 
    float:left; width:420px; 
    height:30px; 
    padding:0; 
    } 

form#buttonform{ 
    background-color:transparent; 
    border:none; 
    clear:both; 
    outline:none; 
} 

input#gohome{ 
    padding:0; 
    margin:0; 
    background-color:transparent; 
    background-repeat:no-repeat; 
    width:280px; 
    height:60px; 
    border:none; 
    float:right; 
    background-image: url('images/gohome.png'); 
    outline:none; 
} 
input#gohome:hover { 
    background-image: url('images/gohome_hover.png'); 
    cursor:pointer; 
    outline:none; 
}
         
 

Pouvez-vous expliquer pourquoi cela se passe et comment cacher les grandes lignes?

Answer 1

En fait, le "contour: none;" fonctionne uniquement pour les balises d'ancrage, pas les balises d'entrée ou les balises de bouton (essayez de tester un exemple de page HTML dans Firefox si vous ne me croyez pas).

Étant donné que le navigateur en question est Firefox, il existe une règle spécifique au navigateur pour cela.

input::-moz-focus-inner { border: 0; } 

Answer 2

Insérer dans votre fichier CSS pour le site

form input 
{ 
    border: none; 
    outline: none; 
} 

Et fait.

Après Removing The Dotted Ouline:

Ce style est par défaut pour le objectif d'accessibilité. Pour les gens sans la possibilité d'utiliser une souris, ils ont encore besoin d'un indicateur visuel qu'ils ont actuellement un lien actif (ainsi, par exemple, ils peuvent appuyer sur entrer pour naviguer vers ce lien).

Après avoir créé une petite page de test sur place, je vois ce qui suit dans Chrome:

Screen shot http://img714.imageshack.us/img714/7445/googlechromescreensnapz.jpg

Avec ce code CSS (j'ai ajouté les frontières pour que je puisse voir où la forme est et où la bouton est, notez que le Lorem Ipsum est à l'intérieur de la forme):

#hdrRight { 
     float:left; width:420px; 
     height:30px; 
     padding:0; 
     } 

    form#buttonform{ 
     background-color:transparent; 
     border:1px solid black; 
     clear:both; 
     outline:none; 
    } 

    input#gohome{ 
     padding:0; 
     margin:0; 
     background-color:transparent; 
     background-repeat:no-repeat; 
     width:280px; 
     height:60px; 
     border:1px solid black; 
     float:right; 
     background-image: url('images/gohome.png'); 
     outline:none; 
    } 
    input#gohome:hover { 
     background-image: url('images/gohome_hover.png'); 
     cursor:pointer; 
     border: 1px solid blue; 
     outline:none; 
    } 

Answer 3

Appy ...

border: none;

à votre entrée