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

【问题标题】：Safari search icon issue in Wordpress search formWordpress 搜索表单中的 Safari 搜索图标问题
【发布时间】：2020-10-20 14:52:34
【问题描述】：

我在使用 Safari 浏览器时遇到问题，尤其是移动 iphone。

这就是搜索图标的样子

我想从搜索图标中删除灰色背景。我尝试了usi fa图标，尝试使用png，仍然一样。这只发生在 Safari 中。

这是我的 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>

【问题讨论】：

请张贴图片图标的网址或创建minimal reproducible example。这似乎是搜索图像本身的问题。使用的 png 是否具有透明背景？搜索图标旁边的 cart 和 profile 图标看起来不错。尝试匹配它们，看看有什么不同。
您能否至少提供示例或给我们一个现场站点，我们可以尝试修复它？

标签： html css safari cross-browser mobile-safari

【解决方案1】：

我无法重现此行为，但您应该可以使用这些选项删除此背景：

选项 1

使用css删除此链接的background-color：

.search-form a[type="submit"] {
    background-color: transparent!important;
}

.search-form a[type="submit"] {
  background-color: transparent!important;
}

<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="..." value="..." name="s" />
    </label>
  <a href="#" type="submit"><img width="18" src="https://s1.qwant.com/thumbr/0x380/8/0/8b539523a5571f0163f2088126faaf78351fc4c172c3a495be75689e0cf2b1/img_524293.png?u=https%3A%2F%2Fcdn.onlinewebfonts.com%2Fsvg%2Fimg_524293.png&q=0&b=1&p=0&a=1"></a>
</form>

查看jsfiddle。

选项 2

如果此颜色不是来自background-color 属性，那么它可以是css gradient。使用删除它：

.search-form a[type="submit"] {
  background-image: none!important;
}

【讨论】：

【解决方案2】：

我已经面对这个问题很长时间了。这是appearance 问题...在 CSS 下使用

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

希望它对你有用。

【讨论】：