The goal was to build a search form that would appear to be one input element, but would include a small submit button on the end for accessibility reasons. I developed a something and started to test it in Internet Explorer. I ran into some issues.

Goal

Code

1
2
3
4
5
6

<form action="#">
    <div id="search">
        <input type="text">
        <button type="submit">Search</button>
    </div>
</form>

1
2
3
4
5

#search input   { float:left; width: 202px; height:18px; padding:2px;}
#search button  { float:left; overflow:hidden; text-indent:-9999em; height:24px; width: 17px; }
#search input   { border: 1px solid black; border-width: 1px 0 1px 1px; }
#search button  { border: 1px solid black; border-width: 1px 1px 1px 0;
                  background: #FFF url(mag.png) no-repeat center center; }

Result in IE6/7

This is because when you use a border on an input with the type=submit, it adds an extra border when the form is active. After struggling with several outline and border definitions with :focus, :active, :hover, as mentioned by a StackOverflow post, I decided to look around to see how other people solved this problem.

Twitter

Facebook

First I looked at Twitter. They simply use an anchor and is in my opinion a bad solution because it is completely worthless without javascript enabled. Facebook simply didn’t define a border on its submit and that seemed to work. Alas, that means I must add an extra element or hard-code it into my image. or I could use the input type image.

Final Solution

1
2
3
4
5
6

<form action="#">
    <div id="search">
        <input type="text">
        <input type="image" src="mag.png" id="search-submit" value="Search">
    </div>
</form>

1
2
3
4

#search input   { float:left; width: 202px; height:16px; padding:2px;}
#search input   { border: 1px solid black; border-width: 1px 0 1px 1px; }
#search #search-submit
                { border: 1px solid black; border-width: 1px 1px 1px 0; width:16px; height:16px;  }

This requires you to set the image inside the HTML which might be undesirable. Alternatively you could use a 1px transparent gif and set the background with CSS. I also solved the problem by adding an extra div and eliminating the border on the type=submit. I did not like that extra markup and I think the input type=image is a better solution.