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?

default button style

Example:

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

Possible duplicated of an answered question: http://stackoverflow.com/questions/7741964/how-to-disable-blue-glow-for-html-button-in-ie9?rq=1 — Arkana, May 20 '13 at 12:17
possible duplicate of [How is the default submit button on an HTML form determined?](http://stackoverflow.com/questions/925334/how-is-the-default-submit-button-on-an-html-form-determined) — Peter, May 20 '13 at 13:08

score 24 · Answer 1 · answered Aug 23 '13 at 09:40

24

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;

answered Aug 23 '13 at 09:40

Ben Frain

2,510
1
29
44

1

`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. – Mark Rummel Aug 26 '14 at 19:17
1

this is the right answer you should give the author credit by selecting it as the answer. – samuelkobe Jan 30 '15 at 05:23

score 12 · Answer 2 · answered May 20 '13 at 11:40

12

Use this code:

button { border:0;}

answered May 20 '13 at 11:40

Touhid Rahman

2,455
21
22

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... – thomthom Oct 24 '14 at 11:21

score 6 · Answer 3 · answered Mar 12 '14 at 14:12

6

my solution (after a few months)

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

answered Mar 12 '14 at 14:12

Joe RR

262
3
22

score 2 · Answer 4 · edited Jan 22 '15 at 13:23

2

This may help you. Use following CSS properties:

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

edited Jan 22 '15 at 13:23

Mahdi

9,247
9
53
74

answered May 20 '13 at 11:58

Butani Vijay

4,181
2
29
61

1

This removed the dotted line (witch i wanted to keep), but it did not remove the blue border thingii... – Peter May 20 '13 at 12:04
Please try this. i hope it will help you. input { background: none transparent; border: none; } For Demo Visit This Link :http://jsfiddle.net/dEvKb/64/ – Butani Vijay May 20 '13 at 12:08
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?") – Peter May 20 '13 at 12:12

score 2 · Answer 5 · answered May 20 '13 at 19:04

2

Use this code:

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

answered May 20 '13 at 19:04

Mohammad Areeb Siddiqui

9,795
14
71
113

score 0 · Answer 6 · edited Feb 11 '14 at 21:12

0

#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.

edited Feb 11 '14 at 21:12

pinckerman

4,115
6
33
42

answered Feb 11 '14 at 20:55

crazyjedi98

23
7

score -1 · Answer 7 · answered May 20 '13 at 12:06

-1

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

answered May 20 '13 at 12:06

score -2 · Answer 8 · answered May 20 '13 at 12:05

-2

Simply add border-radius to develop the button look:

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

answered May 20 '13 at 12:05

Touhid Rahman

2,455
21
22

That also changes the layout, one question do you actually try the stuff you post or are you just guessing? – Peter May 20 '13 at 12:10
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. – Touhid Rahman May 20 '13 at 12:12
2

@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 ;) – Arkana May 20 '13 at 12:27
@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. – Touhid Rahman May 20 '13 at 12:30
@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... – Peter May 20 '13 at 13:02
@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. – Touhid Rahman May 20 '13 at 13:54

CSS remove default blue border

8 Answers8

Linked