Strange search bar border (6 posts)

  1. Luk Gaming
    Posted 4 years ago #

    I've looked all over the internet and I can't seem to find the reason for this. Not even my fire bug can help me out.

    Basically, I'm aiming for a custom search bar box, I've made a searchform.php and starting to css style it.

    here is my css code

    height: 29px;
    background: url(Images/Searchbar.png) no-repeat;}

    and here is my searchform.php

    <form role="search" method="get" id="searchform" action="http://localhost/wordpress/">
    	<input type="text" value="" name="s" id="s">
    	<input type="submit" id="searchsubmit" value="Search">

    Everything works fine, I just how this stupid silver border around my background image, I have no idea why it's there or where it came from.

    Here is a screen shot (I'm on a local server so I can't show my site).

    Any help would be great, thanks.

  2. Luk Gaming
    Posted 4 years ago #


    typo, sorry :).

  3. datdesignguy
    Posted 4 years ago #

    try this code for your css:

    input#s {
      width: 160px; /* Width of image minus the padding to clear the search icon on the left */
      height: 29px;
      padding-left: 26px;
      border: none;
      outline: none;
      background: url( Images/Searchbar.png ) no-repeat;
  4. Luk Gaming
    Posted 4 years ago #

    That works great thanks! the border is now gone.

    However, I can not longer enter anything into the search. I could this before.

  5. datdesignguy
    Posted 4 years ago #

    Hmmm... that could be any number of things. I use very similar code to what I pasted above all the time without issue. You may need to try using element-inspector and/or firebug.

    If there are any floated/absolutely-positioned elements nearby, it's possible you may have something overlapping the clickable area to activate the text field. I had that problem before and it took forever to solve!

    Without being able to look at your site myself, I'm afraid I can't point you in the right direction. I'd need to be able to peek at your source and css.

  6. Luk Gaming
    Posted 4 years ago #

    Oh I figured it out. You were right, I had it set on a relative position (because it was the easiest way to place it where I needed it) so it must of been overlapping with something else.

    I've used your exact code and it has fixed it now. I'll just have to figure out how to position it another why.

    Thanks a lot mate!

Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.