Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

default button style

Example:

<button  onclick="javascript:alert('remove');">Remove name</button>
like image 962
Peter Avatar asked May 20 '13 11:05

Peter


3 Answers

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;

like image 188
Ben Frain Avatar answered Nov 20 '22 22:11

Ben Frain


Use this code:

button { border:0;}
like image 12
Touhid Rahman Avatar answered Nov 20 '22 21:11

Touhid Rahman


my solution (after a few months)

button:focus {
outline: 0;
box-shadow: none;
}
like image 6
Joe RR Avatar answered Nov 20 '22 20:11

Joe RR