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可以与input [type =“text”]一起使用，如下所示：

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

摆脱<input />框上的边框

3 个答案: