Débarrassez-vous des bordures sur une boîte <input>

Question

J'ai le code HTML ci-dessous. Je voudrais faire cela pour que ce soit juste un espace blanc sans frontières. J'ai essayé de supprimer les bordures avec CSS comme ceci: #search-box {border: none;} mais cela n'a pas fonctionné. Des pensées?

Voici le code HTML qu'il est:

<div id="topNav"> 

<span class="topNavLink" id="headingTitle" >Word 4 Word</span> 

<span id="topNav1two"> 
<a href="#" id="home" class="topNavLink">Home</a> 
<a href="#" id="new" class="topNavLink">New Test</a> 
</span> 
<span> 
<input type="search" size="35" id="searchInput"><!--this is the search box--> 
<input type="button" value="Search" id="searchBttn"> 
</span> 

<span> 
<a id="feedback" target="_blank" class="topNavLink">Help</a> 

<a href="#" id="settings" class="topNavLink">Settings</a> 

</span> 


</div> 

Et voici le CSS pertinent:

/*Deals with the top nav*/ 

#topNav { 
      padding-top: 10px; 
      padding-bottom: 10px; 
      background: black; 
      position: absolute; 
      top: 0; 
      left: 0; 
      width: 100%; 
     } 

.topNavLink { 
       text-decoration: none; 
       color: orange; 
       padding-left: 10px; 
       padding-right: 10px; 
      } 

#headingTitle { 
       font-size: 1.3em; 
       } 

/* ends top nav */ 

/* Deals with the search bar */ 

#searchBttn { 
       height: 25px; 
      } 

#searchInput{ 
       border: none; 
       background: black; 
      } 

/* ends the search bar */ 

Answer 1

Je vous suggère d'essayer de réglage:

#search-box { border: 1px solid transparent; }

A défaut, essayez de résoudre le problème avec ceci:

#search-box { border: 0; }

Answer 2

That works pour moi (Chrome9 sur Win7). Quel navigateur utilisez-vous? Peut-être poster plus de votre code?

Answer 3

border: none peut être utilisé avec l'entrée [type = "text"], comme ceci:

input[type="text"] { 
    border: none; 
}