CODEWITHSUNDEEP
htmlcssinternet-explorerbuttonborder
Peter
Peter

Reputation: 38555

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>

Upvotes: 26

Views: 66301

Answers (8)

Butani Vijay
Butani Vijay

Reputation: 4239

This may help you. Use following CSS properties:

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

Upvotes: 2

Joe RR
Joe RR

Reputation: 262

my solution (after a few months)

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

Upvotes: 6

crazyjedi98
crazyjedi98

Reputation: 23

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

Upvotes: 0

Ben Frain
Ben Frain

Reputation: 2568

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;

Upvotes: 24

Mohammad Areeb Siddiqui
Mohammad Areeb Siddiqui

Reputation: 10189

Use this code:

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

Upvotes: 2

anon
anon

Reputation: 

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

Upvotes: -1

Touhid Rahman
Touhid Rahman

Reputation: 2593

Simply add border-radius to develop the button look:

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

Upvotes: -2

Touhid Rahman
Touhid Rahman

Reputation: 2593

Use this code:

button { border:0;}

Upvotes: 12

Related Questions