擺脫<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>框中的邊框

回答

相關問題