CSS remove default blue border

Question

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>

Solution 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;

Solution 2

Use this code:

button { border:0;}

Solution 3

my solution (after a few months)

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

Solution 4

Use this code:

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

Solution 5

This may help you. Use following CSS properties:

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

View more solutions

Comments

[samayo]

some image or code would be nice

[Raven]

@phpNoOb there is a image (the button), added some code..

[samayo]

It is not showing the blue border in my IE8

[Raven]

@phpNoOb im using IE9 that could make a difference...

[Arkana]

Possible duplicated of an answered question: stackoverflow.com/questions/7741964/…

[Raven]

possible duplicate of How is the default submit button on an HTML form determined?

[Raven]

This removed the dotted line (witch i wanted to keep), but it did not remove the blue border thingii...

[Butani Vijay]

Please try this. i hope it will help you. input { background: none transparent; border: none; } For Demo Visit This Link :jsfiddle.net/dEvKb/64

[Raven]

That also changes the layout, one question do you actually try the stuff you post or are you just guessing?

[Raven]

im sorry but that removes the default style from the buttons ("is there any way to remove that with css without overriding the whole button style?")

[Touhid Rahman]

I am programming for 5 years. If you create a new problem in the way of solving other, you can blame own skill not others who gave you the idea to fix your problem.

[Arkana]

@TouhidRahman One recomendation, please do not take it as an offense, but keep in mind that if your answer doesn't fit the OP requisites, or your ansewr looks effortless, you should probably get a negative vote. If you think it's impossible to achieve exactly what the OP wants, please explain why it isn't possible (or simply say "that's not possible"), and then give your alternative, so the OP can see at least you have tried. In other case it seems that you only want to be the fastest-gun ;)

[Touhid Rahman]

@Arkana Thanks for your advice. But it really hurts when someone criticize you when you have committed no mistake and you are here to help him.

[Raven]

@TouhidRahman it was not meant to hurt you, but to me it seemed like you posted 2 quick fixes within a few minutes with out even reading the whole questions... it clearly stated "is there any way to remove that with css without overriding the whole button style?". so sorry if i offended you that was not my reason for posting a comment...

[Touhid Rahman]

@Petroj: I was first because I know the issue and as a front-end developer I worked with issues on a regular basis. It's okay, no problem buddy, nice to meet you.

[Mark Rummel]

button {outline: 0;} did the trick in Chrome. I had already removed the background and border, but there was still a blue border when I clicked the button in Chrome.

[thomthom]

Is there a way to have your own custom border, but not that blue inner border? I can only get rid of both or none...

[samuelkobe]

this is the right answer you should give the author credit by selecting it as the answer.