html - Removing blue border in <form> submit button -


i trying remove small blue border around submit button appears when it's pressed. tried fix border: none; didnt fix it. code looks 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 run on localhost , google chrome 42.0.2311.90


update


.btn:focus {       outline: none; } 

this fixed me! not not plan on making site accessible via keyboard not need blue outline. it's looks.

i think looking this:

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

add above styles inside head tag. default, bootstrap have outline color blue focused buttons. can remove/update using class "btn" mentioned above.

update

as @matthewrapati suggested: outline let's people know button has focus , should not removed. accessibility concern. better restyle if default not wanted


Comments

Popular posts from this blog

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

java - UML - How would you draw a try catch in a sequence diagram? -

c++ - No viable overloaded operator for references a map -