去掉<input>框上的边框

Question

我有下面的HTML。我想让它成为一个没有边界的空白空间。我试着用CSS去除边框，就像这样：#search-box {border: none;}，但是不起作用。有什么想法吗？

下面是它所在的HTML：

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

下面是相关的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

我建议你尝试设置：

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

如果做不到这一点，请尝试使用以下命令强制解决问题：

#search-box { border: 0; }

Answer 2

我的That works (Win7上的Chrome9)。您使用的是哪种浏览器？也许可以发布更多的代码？

Answer 3

border: none可以与inputtype="text“一起使用，如下所示：

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