爲什麼我的div裏面有灰色

Question

我在看我的div，名爲'mainsearchsection'，我在上面和每個搜索字段的左邊都看到少量的灰色。我不知道爲什麼？有沒有關於邊距或填充的東西搞砸了？

這裏是我的小提琴 http://jsfiddle.net/XLhsR/

<div class="mainsearchsection"> 
     <h1>Share gifts with friends.</h1> 
     <h2>Services to exchange from every country.</h2> 
     @using (Html.BeginForm("Search", "Gifts", FormMethod.Get)) 
     { 
      <div class="mainsearchdiv"> 
       <input class="mainsearch" type='search' name='searchTerm' value='Gifts' data-ouluvu-autocomplete="@Url.Action("AutoComplete")" /> 
       <input class="mainlocation" type="text" name="location" value="Location" /> 
       <input class="mainavailability" type="text" name="availability" value="Availability" /> 
       <input class="mainsubmit" type='submit' value='Search' /> 
      </div> 
     } 
    </div> 


.mainsearchdiv { 
border: 2px solid black; 
padding: 2px 2px 2px 2px; 
background-color: black; 
border-radius: 5px; 
} 

.mainsearch { 
width: 300px; 
height: 35px; 
margin-left: 2px; 
border-radius: 5px; 
} 

.mainsubmit { 
height: 35px; 
width: 80px; 
border-radius: 5px; 
} 

.mainlocation { 
height: 30px; 
border-radius: 5px; 
} 

.mainavailability { 
height: 30px; 
border-radius: 5px; 
} 

Answer 1

默認情況下，文本輸入邊框，這就是你現在看到的是什麼。把它們關掉，這樣做

.mainsearchsection input { 
    border-width:0; 
} 

查看更多：http://jsfiddle.net/XLhsR/4/

Answer 2

瀏覽器會自動添加邊框輸入字段。嘗試使用重置樣式表或使用

input { 
border: 0; 
} 

http://jsfiddle.net/XLhsR/1/