Question

I know this question has been asked before, but I’m having some difficulty getting it to work in IE9. I have an html page with 3 forms in it (since each form contains a request to a different resource on a website). The html looks like this:

<form action="/SomeController1/Action" method="get"><button name="action" value="someValue">Request the first thing</button></form>
<form action="/SomeController2/Action" method="get"><button name="action" value="someValue">Request the second thing</button></form>
<form action="/SomeController3/Action" method="get"><button name="action" value="someValue">Request the third thing</button></form>

I’m trying to disable the blue glow that is showing up on all three buttons when the page loads. I think it looks really confusing…

The solution that I’m trying to implement, which doesn’t seem to be working, is:

button
{
    outline-width: 0px;
    outline: none;
}

At any rate, the glow doesn’t appear in Firefox or Chrome, it just seems to be appearing in IE. I suppose I could just use one form and put 3 buttons in it, but this seems a bit more like a workaround rather than a solution. Is there any way to do this using CSS or javascript? Any help will be appreciated!

Thanks!

Edit – Here’s an image of the problem:

Answer 1

I was just hoping to get rid of the blue color.

You can’t just get rid of it, because Internet Explorer uses the native buttons, from your system theme. Take a look at any system dialog box with a button, for example when you change your wallpaper.

You can only remove the blue inner glow if you’re willing to style a decent looking button yourself, starting with setting a border/background (which disables using the native style).