HTML5: Search box radius settings ignored by IE9

[FrankyT]

I want a search box without curved corners in HTML5. I have been through all the search widgets in the Skin - Search Filter, Search Heading and Search Input, and set all radius styles to 0px, e.g. BorderTopRightRadius, BorderBottomLeftRadius etc.

This looks how I want in Firefox, Chrome and Safari. It also looked how I wanted in IE8. However, now that Microsoft has upgraded IE to version 9[1], I get curved corners in IE.

Has anybody else come across this problem? Looks like a bug to me, but I'm not sure whether the fault lies with MS or Madcap.

[1] Unilaterally, incidentally... grr.

[NorthEast]

There's also a Search Bar style in the skin, which is the 'outer' box; change the border radius on that style (which is 15px by default).

[FrankyT]

There's also a Search Bar style in the skin, which is the 'outer' box; change the border radius on that style (which is 15px by default).

Already done that. It doesn't work.

[FrankyT]

Here's a fudge that seems to get rid of round corners in IE9, for those prepared to use JavaScript. You force the style "border-radius: 0 0 0 0" on the elements you want to reformat. E.g.

Code: Select all

function removeRoundCorners(element) {
    element.style.cssText += "; border-radius : 0 0 0 0;";
}

removeRoundCorners(document.getElementById("search-field"));

You need to do this to the following elements:

<input id="search-field"...>
<div class="search-bar..."...>
<div class="search-submit"...>

Locating the <div>s by class requires extra code that I can't be bothered to post right now.

[NorthEast]

There's also a Search Bar style in the skin, which is the 'outer' box; change the border radius on that style (which is 15px by default).

Already done that. It doesn't work.

That's a bit strange then, as it works fine for me in IE9; setting it to 0 gives square edges on the search outer box.