title: Why is select:-moz-focusring not removing Firefox dotted lines in this bootstrap nav bar?
body: <p>I want to get rid of the Firefox dotted lines in my bootstrap navigation bar.</p>
  
  <p>I have read in many places that adding this to the CSS file will get rid of them:</p>
  
  <pre><code>    a:-moz-focusring {
          color: transparent;
          text-shadow: 0 0 0 #000;
      }
  </code></pre>
  
  <p>But in the following code they still appear. Does anyone know why?</p>
  
  <pre><code>&lt;html ng-app="mainApp"&gt;
      &lt;head&gt;
          &lt;style type="text/css"&gt;
              [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
                  display: none !important;
              }    
              select:-moz-focusring {
                  color: transparent;
                  text-shadow: 0 0 0 #000;
              }
          &lt;/style&gt;
          &lt;script src="http://code.jquery.com/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.js"&gt;&lt;/script&gt;
          &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"&gt;
          &lt;link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet" /&gt;
      &lt;/head&gt;    
      &lt;body ng-cloak ng-controller="mainController"&gt;
          &lt;nav class="navbar navbar-default"&gt;
              &lt;div class="container-fluid"&gt;
                  &lt;div class="navbar-header"&gt;
                      &lt;div class="navbar-brand"&gt;AngularJS Routing&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;ul class="nav navbar-nav"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-home"&gt;&lt;/i&gt; Home&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#about"&gt;&lt;i class="fa fa-shield"&gt;&lt;/i&gt; About&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#contact"&gt;&lt;i class="fa fa-comment"&gt;&lt;/i&gt; Contact&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
  
          &lt;div class="col-lg-12"&gt;
              &lt;div ng-view&gt;&lt;/div&gt;
          &lt;/div&gt;        
  
          &lt;script&gt;
                              var mainApp = angular.module('mainApp', ['ngRoute']);
                              mainApp.config(function ($routeProvider) {
                                  $routeProvider
                                          .when('/', {
                                              templateUrl: 'pages/home.htm',
                                              controller: 'mainController'
                                          })
                                          .when('/about', {
                                              templateUrl: 'pages/about.htm',
                                              controller: 'aboutController'
                                          })
                                          .when('/contact', {
                                              templateUrl: 'pages/contact.htm',
                                              controller: 'contactController'
                                          });
                              });
                              mainApp.controller('mainController', function ($scope) {
                                  $scope.message = 'the home page';
                              });
                              mainApp.controller('aboutController', function ($scope) {
                                  $scope.message = 'the about page';
                              });
                              mainApp.controller('contactController', function ($scope) {
                                  $scope.message = 'the contact page';
                              });
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>