Strange search bar border

  • 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

    input#s{width:186px;
height: 29px;
background: url(Images/Searchbar.png) no-repeat;}

    and here is my searchform.php

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

    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.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter Luk Gaming

    (@luk-gaming)

    *have

    typo, sorry :).

    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;
}

    Thread Starter Luk Gaming

    (@luk-gaming)

    That works great thanks! the border is now gone.

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

    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.

    Thread Starter Luk Gaming

    (@luk-gaming)

    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!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Strange search bar border’ is closed to new replies.