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

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

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

2 个答案: