How do I remove the square when I click the icon?

Asked

Viewed 434 times

0

I’m testing the navbar bootstrap and, as I don’t know much about styles, I don’t know how to fix it. When I click on the icon a dotted frame appears outside the image outline as below:

inserir a descrição da imagem aqui

I know this is related to the style of the page, but I don’t know how to fix it. Below follows the code of the page I’m using:

<!DOCTYPE html>
<html>
  <head> 
  <link href="css/bootstrap.css" rel="stylesheet">
  <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
 </head>
 <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
 <div class="container">
  <div class="navbar-header">
   <a class="navbar-brand" href="#">
    <img alt="Brand" src="lib/img/mig.png">
   </a>
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
   </button>
   <h1 class="navbar-header" href="#">Home</h1>
  </div>
  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
   <br>
    <ul class="nav nav-pills navbar-right">
     <li class="active"> 
       <a href="#">Home</a>
     </li>
     <li class=""> 
       <a href="#">About</a>
     </li>
     <li class=""> 
       <a href="#">Contact</a>
     </li>
     <li class=""> 
       <a href="#">Maps</a>
     </li>       
    </ul>
   </br>
  </div>
   <!-- /.navbar-collapse -->
  </div>
  <!-- /.container -->
 </nav>
 <body> 
 </body>
</html>
html twitter-bootstrap css3

  • The icon would be "Mig.png"? it’s hard to check what’s going on, without being able to take a look at css. put the bootstrap.css and the font-awesome.min.css you are using (which version) so I can have a look. if possible create a project in jsfidlle.

  • boy, you have to adjust the padding there so the image is centered on the navbar, if I’m not mistaken in class .navbar-brand

1 answer

1

This property is called Outline, you can remove it like this: outline: none:

a:active, a:focus { 
    outline: none; 
    ie-dummy: expression(this.hideFocus=true);
}

This form is the most compatible I found, works from IE9 Above.

Browser other questions tagged html twitter-bootstrap css3

You are not signed in. Login or sign up in order to post.