Get rid of the borders on an <input> box

Question

I have the below HTML. I would like to make this so that it is just a white space without borders. I tried removing borders with CSS like this: #search-box {border: none;} but that did not work. Any thoughts?

Here is the HTML that it is in:

<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>

And here is the relevant CSS:

/*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

I'd suggest you try setting:

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

Failing that, try forcing the issue with this:

#search-box { border: 0; }

Answer 2

That works for me (Chrome9 on Win7). What browser are you using? Maybe post more of your code?