So I’ve made the new custom search widget, all that fancy without any images. Mind you, it’s only fancy in Mozilla/Webkit Engines. IE shows a boring search button. Unfortunately I don’t have a good testing environment for IE so I can’t really test it, although there is a method of making rounded corners in IE without images but I can’t seem to remember it. I’m sure it will come to me and I’ll update the CSS accordingly.
Update: 11/19/2010, 10:00pm
Found it! Simple to implement too.
- Download the .htc file here: http://code.google.com/p/curved-corner/
- Add the following to the CSS file:
behavior: url(path/to/border-radius.htc)
- Use the CSS3 standard border-radius attribute.
I’m sure there are some nuances to it, everything in IE seems to, but I’ve used this one before and it does work (albeit not as well as proper border-radius support works). This should work until the release and widespread adoption of IE9, wich supports real border-radius’s, and does a damn good job doing it.
Update 11/20/2010, 7:16pm
I’ve since changes the search icon, so it’s not a fancy looking. Also, something to remember, using this will prevent your CSS file from validating, then gain all those browser-specific border radius calls will do the same thing.