Safari search icon issue in Wordpress search form

user_1838319 0
Viewed 131

I having issues with Safari browser, especially mobile iphone.

this is how the search icons looks

enter image description here

I want to remove that gray background from the search icon. I tried usi fa icons, tried using a png, still the same. This is happening only in Safari.

This is my searchform.php code

<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>
mobile-safari safari cross-browser css html
2 Answers

I wasn't able to reproduce this behaviour but you should be able to remove this background with theses options:

Option 1

Remove the background-color of this link using css:

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

Checkout the jsfiddle.

Option 2

If this color doesn't come from a background-color property, then it can be a css gradient. Remove it by using:

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

I have faced this issue much time. this is an appearance issue ... use below CSS

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

Hope it's work for you.

user_76046620
Related