CODEWITHSUNDEEP
htmlcss
Aruloci
Aruloci

Reputation: 589

Removing blue border in <form> submit button

I am trying to remove the small blue border around my submit button which appears when it's pressed. I tried to fix it with border: none; but that didnt fix it. Currently my code looks like this:

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="theme.css" />
        <link rel="stylesheet" type="text/css" href="hover.css" />
    </head>
    <body>
        <form id="button1" action="#" method="post">
            <input type="submit" value="ORANGE" 
                class="btn btn-warning"/>
        </form>
    </body>
</html>

Jsfiddle

I'm using XAMPP to run it on localhost and Google Chrome 42.0.2311.90


UPDATE

.btn:focus {
      outline: none;
}

This fixed it for me! I do not not plan on making my site accessible via keyboard so I do not need the blue outline. It's just for looks.

Upvotes: 8

Views: 7307

Answers (4)

Durgesh Chaudhary
Durgesh Chaudhary

Reputation: 1077

Outline are primarily used for accessibility settings, and should be retained for default behavior unless you are providing some mechanism or highlight for focus/accessibility. If you simply remove without providing the same and user uses Keyboard to navigate, he will not be able to know what link/button he is currently on and may ruin the overall experience with your page.

Remove the outline from button

.btn-warning:focus{
    outline:0px;
}

You can also remove outline from all the buttons using

input[type=button]:focus,input[type=submit]:focus{
    outline:0px;
}

Default button focus has outline of 1px blue on Chrome. There are many more items which have outline, you can disable all of them using:

*{
    outline:0px;
}

Upvotes: 1

Fahad Khan
Fahad Khan

Reputation: 1635

I think you are looking for something like this:

<style>   
 .btn:focus {
      outline: none;
    }
</style>

Add the above styles inside head tag. By default, bootstrap have outline color blue for focused buttons. You can remove/update it using class "btn" like mentioned above.

UPDATE

As @MatthewRapati suggested: This outline let's people know that the button has focus and should not be removed. It is an accessibility concern. It is better to restyle it if the default is not wanted

Upvotes: 7

Shelly
Shelly

Reputation: 351

Demo :http://jsfiddle.net/baqunkn1/

.btn-warning {
  color: #ffffff;
  background-color: #ff851b;
  border-color: #ff7701;
  border: none;
  outline:none;
}

Upvotes: 1

chrisbedoya
chrisbedoya

Reputation: 810

Remove the "outline" from the button on click (a:focus)

.btn:focus {
    outline: none;
}

Upvotes: 2

Related Questions