輸入字段周圍的不可見邊框不起作用

Question

這是我的搜索欄和按鈕的代碼。我使用的圖片作爲背景，並想輸入域邊界dissappear，但它似乎並不奏效

.masthead-search input[type=search] { 
background: url(http://localhost:6868/wp-content/uploads/2014/01/search-button11.png) no-repeat; 
float: left; 
border: 1px solid #fff; 
font-size: 11px; 
padding: 0 10px; 
width: 130px; 
height: 28px; 
line-height: 28px; 
border: none; 
-webkit-appearance: none; 
border-radius: 10px;} 

這是我在php文件中的代碼爲WordPress：

<input type="search" class="field" name="s" style="border: 1px #fff;"value="<?php echo esc_attr(get_search_query()); ?>" id="s" placeholder="<?php echo esc_attr_x('Search &hellip;', 'placeholder', 'wpex'); ?>"/> 

Answer 1

你在你的CSS兩個邊界的定義：

.masthead-search input[type=search] { 
.... 
border: 1px solid #fff; 
... 
.... 
border: none; 
-webkit-appearance: none; 
border-radius: 10px;} 

，並應用到你的領域（其中缺少一個參數）樣式：

<input type="search" class="field" name="s" style="border: 1px #fff;" 

瀏覽器應該做什麼？他可能會用最後一個，即1px邊框。

Answer 2

試試這個

.masthead-search input[type=search] { 
background: url("http://localhost:6868/wp-content/uploads/2014/01/search-button11.png") no-repeat; 
float: left; 
border: 1px solid #fff; 
font-size: 11px; 
padding: 0 10px; 
width: 130px; 
height: 28px; 
line-height: 28px; 
border: none; 
-webkit-appearance: none; 
border-radius: 10px;}