html - 去除 <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 { 边界:0; }