输入字段周围的不可见边框不起作用

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;}