摆脱<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; }