csswordpressstylingsearch-form

Search Form Styling CSS

So I have styled my search form on the top banner of my blog, but when I leave the home page to another page the background image search icon disappears! Any suggestions as to why this is happening? Thanks ;-) http://demo.boxofficeboxing.co.uk

#s {
   padding:8px 6px;
   background:rgba(0, 0, 0, 0);
   border-style: solid;
   border-color: #fff;
   border-width: 1px 0px 1px 1px;
   font-family:open sans;
   font-size:14px;
   color: #fff;
   }
   #searchsubmit {
   cursor:pointer;
   position:relative;
   padding:8px 16px;
   left:-9px;
   border-style: solid;
   border-color: #fff;
   border-width: 1px 1px 1px 0px;
   background-color: #a88f4b; 
   font-family:open sans;
   font-size:14px;
   background-image: url('wp-content/uploads/2017/12/search.png'); 
   background-position: center center; 
   background-repeat:no-repeat;
   text-indent: -9999px; 
   }
   ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
   color: white;
   }
   ::-moz-placeholder { /* Firefox 19+ */
   color: white;
   }
   :-ms-input-placeholder { /* IE 10+ */
   color: white;
   }
   :-moz-placeholder { /* Firefox 18- */
   color: white;
   }
   input:focus {
   outline: none; 
   }
Solution

  • It is simple enough to crack..

    The path for your image icon is set to 

    wp-content/uploads/2017/12/search.png

    So when on home page - the url becomes

    http://demo.boxofficeboxing.co.uk/wp-content/uploads/2017/12/search.png

    And when on inside page - say video highlights - the url turns to be

    http://demo.boxofficeboxing.co.uk/videos-highlights/wp-content/uploads/2017/12/search.png

    One way to resolve the same will be set the URL in css to be

    /wp-content/uploads/2017/12/search.png

    That should solve your issue / probelm.