Html Wordpress搜索表单中的Safari搜索图标问题

Html Wordpress搜索表单中的Safari搜索图标问题,html,css,safari,cross-browser,mobile-safari,Html,Css,Safari,Cross Browser,Mobile Safari,我觉得Safari浏览器有问题,尤其是移动iphone 这就是搜索图标的外观 我想从搜索图标中删除灰色背景。我试过usi fa图标,试过使用png,还是一样。这只发生在狩猎中 这是我的searchform.php代码 <form role="search" method="get" style="height: 33px;" class="search-form" action="<?php

我觉得Safari浏览器有问题,尤其是移动iphone

这就是搜索图标的外观

我想从搜索图标中删除灰色背景。我试过usi fa图标,试过使用png,还是一样。这只发生在狩猎中

这是我的searchform.php代码

<form role="search" method="get" style="height: 33px;" class="search-form" action="<?php echo esc_url( home_url( '/' ) ) ?>">
    <label>
        <span class="screen-reader-text"><?php _x( 'Search for:', 'label' )?></span>
        <input type="search" class="search-field yith-s" placeholder="<?php echo esc_attr_x( 'Search &hellip;', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" />
    </label>
    <a href="#" type="submit"><img width="18" src="<?php echo get_stylesheet_directory_uri(); ?>/img/search.png"></a>
</form>

我无法重现此行为,但您应该可以使用以下选项删除此背景:

选择1 使用css删除此链接的
背景色

。搜索表单a[type=“submit”]{
背景色:透明!重要;
}
。搜索表单a[type=“submit”]{
背景色:透明!重要;
}

我已经多次面对这个问题。这是一个外观问题。。。使用下面的CSS

.search-form input{
  -webkit-appearance: none;
  -moz-appearance:    none;
  appearance:         none;
}

希望它对您有用。

请发布图像图标的url或创建。这似乎是搜索图像本身的问题。使用的png是否具有透明背景?搜索图标旁边的
cart
profile
图标看起来不错。尝试匹配它们,看看有什么不同。你能至少提供一个例子,或者给我们一个我们可以尝试修复它的现场站点吗?非常感谢!!这起作用了。Webkit对我来说很有用。