html - 输入字段周围的隐形边框不起作用

Question

这是我的搜索栏和按钮的代码。我正在使用图像作为背景，并希望输入字段边框消失，但它似乎不起作用

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

这是我在 wordpress 的 php 文件中的代码:

<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 边框。