How To Disable Blue Glow For Html Button In Ie9

2019-07-19 08:27发布

问题:

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:

回答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).



回答2:

with 'glow' you mean a border? in that case, just do;

button { border: 0; }


回答3:

I don't have IE 9 to test---but generically in CSS, you should try

button:focus {
    outline:none;
    box-shadow:none;
}

Adapted from "Removing the blue glow from an HTML text input when selected".