All geek questions in one place

Removing a blue border in the form of a <form> submit

I am trying to remove the small blue border around my submit button that appears when it is pressed. I tried to fix it with border: none; but it doesn’t fix it. Currently my code is as follows:

 <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 use XAMPP to run it on localhost and Google Chrome 42.0.2311.90


UPDATE

 .btn:focus { outline: none; }

It fixed it for me! I do not plan to make my site accessible from the keyboard, so I do not need a blue outline. It is just for looks.

+6
source share
4 answers

I think you are looking for something like this:

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

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

UPDATE

As @MatthewRapati said: This plan will allow people to understand that the button has focus and should not be deleted. This accessibility is a concern. It is better to restore it if the default is not required.

+4
source

Remove the "outline" from the button when clicked (a: focus)

 .btn:focus { outline: none; }
+2
source

Outlines are mainly used for accessibility parameters and should be preserved for default behavior if you do not provide any mechanism or select focus / accessibility. If you simply delete without providing the same, and the user uses the Keyboard for navigation, he will not be able to find out which link / button he is currently making, and may spoil the overall experience with your page.

Remove the contour from the button

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

You can also remove the outline from all buttons using

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

The default button focus is 1px blue on Chrome. There are many other elements that have outline, you can disable them all using:

 *{ outline:0px; }
+1
source

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

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

Source: https://habr.com/ru/post/985706/

More articles:


All Articles