我在使用 Safari 浏览器时遇到问题,尤其是移动 iphone。
这是搜索图标的样子
我想从搜索图标中删除灰色背景。我试过使用 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 …', '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 删除此链接的 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;
}
关于html - Wordpress 搜索表单中的 Safari 搜索图标问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64348895/