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 |
|
1 2 3 4 5 |
|
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.
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 |
|
1 2 3 4 |
|
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.