Jump to content


This topic is now archived and is closed to further replies.


Code wont change search color

Recommended Posts

outtareach    3

I am attempting to remove this blue background color that seems to come up with search by default.  I copied and pasted the styles in custom css yet nothing changes it.  I can change in firebug but I'm trying to enact them live.  I changed the color of the searchform but searchfield will not change.  Any insight on where I can change this would be great.  the code Im using is below

#site .searchform .searchfield{
background: url("http://radiosilentplay.com/redesign/wp-content/themes/dms/images/search-btn@2x.png") no-repeat scroll 4px 50% / 14px 14px #fff !important;

but it stays blue.

Share this post

Link to post
Share on other sites
outtareach    3

also is there an easy way just to make this a box that has search in it other than this animated stuff?  Im just trying to put a search box on a page.

Share this post

Link to post
Share on other sites
Danny    1,327



Try this instead:


#site .searchform .searchfield {
background: rgba(0, 0, 0, 0) url("http://radiosilentplay.com/redesign/wp-content/themes/dms/images/search-btn@2x.png") no-repeat 4px 50%;
background-size: 14px 14px;
border: none 0;


The blue is most likely coming from your color options.


If you want your search inside a page, you will most likely need to either create a shortcode to display a search anywhere or use a plugin. As to making it look like a standard search box, you simply need to override all the styling or add your own.

Please search our forums, before posting!

Share this post

Link to post
Share on other sites

  • Similar Content

    • John Olsson
      By John Olsson+
      Hello, i'm working on a webshop, and got this code to really boost the search within WP. But when adding this code to functions.php the front end media library search flipped totally, and not working at all, any ideas what's the problem?
      function atom_search_where($where){ global $wpdb; if (is_search()) $where .= "OR (t.name LIKE '%".get_search_query()."%' AND {$wpdb->posts}.post_status = 'publish')"; return $where; } function atom_search_join($join){ global $wpdb; if (is_search()) $join .= "LEFT JOIN {$wpdb->term_relationships} tr ON {$wpdb->posts}.ID = tr.object_id INNER JOIN {$wpdb->term_taxonomy} tt ON tt.term_taxonomy_id=tr.term_taxonomy_id INNER JOIN {$wpdb->terms} t ON t.term_id = tt.term_id"; return $join; } function atom_search_groupby($groupby){ global $wpdb; // we need to group on post ID $groupby_id = "{$wpdb->posts}.ID"; if(!is_search() || strpos($groupby, $groupby_id) !== false) return $groupby; // groupby was empty, use ours if(!strlen(trim($groupby))) return $groupby_id; // wasn't empty, append ours return $groupby.", ".$groupby_id; } add_filter('posts_where','atom_search_where'); add_filter('posts_join', 'atom_search_join'); add_filter('posts_groupby', 'atom_search_groupby');  
    • Queue-it
      By Queue-it+
      Search function doesn't seem to work. 
      When ever searching for something it redirect to the home page and add the search string to the url.
      For example searching for "cases" it would display https://queue-it.com/?s=cases
      Do you know how to solve that? 
    • Samuel Costa - UDF
      By Samuel Costa - UDF+
      I need a shortcode activate a popup windows with contact form. It is possible without code?
      Link: https://www.udf.org.br/lancamentos/curso-mulher-que-prospera/
    • Samuel Costa - UDF
      By Samuel Costa - UDF+
      i like to know if i can use signup button shortcode inside text editor or embed section.
    • DanatTLFN
      By DanatTLFN
      Site URL: thelocalfilmnetwork.com
      DMS Firmware: 2.2.1
      Wordpress: 4.5.1
      Ticket Reference: 
      At the bottom of this post, there is a CSS only option that I have implemented into my site. It looks brilliant, and I am super grateful for that addition to the thread. The only issue I am having is that the code he provides does not include all of the styling options for the button itself.
      My question is, how might I go about editing the styling of the button i.e. shadows, every element of the coloring, and border colors?
      No big deal if it's not easy to fix. Happy to provide any further information if necessary.
      Kind regards,
      P.S. I have opened up the button in Google Dev window with Inspect and start editing it there, but it looks like there are some areas of the code that are connected to an external source (most likely bootstrap) and therefore I can't seem to edit it as much as I would like.