Get rid of borders in the <input> field

Question

I have below HTML. I would like to make it so that it is just an empty space without borders. I tried removing borders using CSS as follows: #search-box {border: none;} , but that didn't work. Any thoughts?

Here is the HTML 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 corresponding 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 suggest you try installing:

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

Otherwise, try to fix the problem:

#search-box { border: 0; }

Answer 2

This works for me (Chrome9 on Win7). Which browser are you using? Perhaps post more of your code?

Answer 3

border: none can be used with input [type = "text"], for example:

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