摆脱<input>框中的边框

我有下面的HTML。我想这样做，以便它只是一个无边界的白色空间。我尝试用CSS去除边框，如下所示：#search-box {border: none;}但这并不奏效。有什么想法吗？摆脱<input>框中的边框

这里是，它是在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 */

来源

2010-12-07 chromedude

如果这是你真正的代码的顶部跨度标签没有关闭。这会造成大量的错误。 – Kevin 2010-12-07 03:53:02

这是一个很好的观察。 – 2010-12-07 03:54:30

[我看不到边框]（http://jsfiddle.net/kYPVR/）。请修复您的问题，以便我们看到您的问题。 – BalusC 2010-12-07 03:59:51

我建议你尝试设置：

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

如果不能解决这个问题，试试这个问题：

#search-box { border: 0; }

来源

2010-12-07 03:20:51

That works对我来说（Chrome9在Win7上）。你使用的是什么浏览器？也许发布更多的代码？

来源

2010-12-07 03:21:40

边界：没有人能与输入[类型=“文本”]被使用，就像这样：

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

来源

2015-10-08 19:19:44 Florie

摆脱<input>框中的边框

回答

相关问题