CSS remove default blue border

问题:

I have a form with multiple buttons where I use a JavaScript to submit the second button when some one presses enter.

This works great but if I open this form in IE the first button gets a blue border that tells the user "this is the button that will be pressed when you press enter".

Is there any way to remove that with CSS without overriding the rest of the button's styling?

Example:

<button  onclick="javascript:alert('remove');">Remove name</button>

回答1:

Think this should work (only tested IE10 on PC) for the border:

button { outline: 0; }

Want to remove the background (needed on WebKit/Blink)?

Add:

background: none;

Need to get rid of the border (removes background on IE10 too):

border: 0;

回答2:

Use this code:

button { border:0;}

回答3:

my solution (after a few months)

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

回答4:

Use this code:

button {
    border : 0px;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
     border-radius:7px;
}

回答5:

This may help you. Use following CSS properties:

input, 
input:active, 
input:focus {     
    outline: 0;     
    outline-style: none;     
    outline-width: 0; 
}

回答6:

#sideToggle:focus, #sideToggle:active{
  outline: 0;     
  outline-style:none;     
  outline-width:0;
}

This solved my problem if anyone else visits the post. I added my own styles separately, as they really aren't central to the issue.

回答7:

button{border:none; border-radius:4px; -moz-border-radius:4px;}

回答8:

Simply add border-radius to develop the button look:

-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;