Вопрос: Выпадающее меню Bootstrap, отображающее синюю рамку после нажатия


Я использую Bootstrap для создания раскрывающегося меню для одной из моих вкладок на панели навигации. Я пытаюсь настроить его; однако всегда есть этот синий квадрат, который накладывает вкладку после щелчка на вкладке.

Этого не происходит, если я вообще не нажимаю на вкладку, но это происходит после нажатия на нее один раз и наведения мыши на ту же вкладку. То же самое происходит в подменю.

Я пробовал разные способы переопределить CSS, но он не работает. Вот мой код для навигатора. Как мне переопределить это?

 <nav class="navbar">
        <div class="navbar-inner">
            <a href="#" class="brand"><div id="brand_font">Christina Yang</div></a>
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <div class="nav-collapse collapse">
            <ul class="nav">
                <li class="divider-vertical"></li>
                <li><a href="#" id="inner-color"><i class="icon-home"></i>home</a></li>
                <li class="divider-vertical"></li>
                <li><a href="#" id="inner-color"><i class="icon-comment"></i>blog</a></li>
                <li class="divider-vertical"></li>
                <li><a href="#" id="inner-color"><i class="icon-info-sign"></i>about</a></li>
                <li class="divider-vertical"></li>
                <li><a href="#" id="inner-color"><i class="icon-camera"></i>photography</a></li>
                <li class="divider-vertical"></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="inner-color">
                        <i class="icon-user"></i>connect
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">LinkedIn</a></li>
                        <li class="divider"></li>
                        <li><a href="#">contact</a></li>                                        
                    </ul>
                </li>
                <li class="divider-vertical"></li>
            </ul>
            </div>
        </div>
    </nav>  

Вот моя соответствующая работа CSS для этого раздела.

 @media (max-width: 767px) {

  .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {
    background-color: #009999;
    display: none;
    border: none;
    /*box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125) inset;*/
    color: #555555;
    text-decoration: none;
  }
} 
  @media (max-width: 767px) {
   .nav-collapse .nav > li > a:hover, .nav-collapse .nav > li > a:focus, .nav-collapse .dropdown-menu a:hover, .nav-collapse .dropdown-menu a:focus {
      background-color: #009999;
  }


}
  @media (max-width: 480px) {

 .nav-collapse .nav > li > a:hover, .nav-collapse .nav > li > a:focus, .nav-collapse .dropdown-menu a:hover, .nav-collapse .dropdown-menu a:focus{
    background-color: #009999;
  }

}


.dropdown-menu a:hover,.dropdown-menu a:focus{
  filter:none !important;
  -webkit-transition:background 1s ease;
  -moz-transition:background 1s ease;
  -o-transition:background 1s ease;
  transition:background 1s ease;
}

.dropdown-menu::after, .dropdown-menu::before{
   border:none !important;
}

@media (max-width: 979px) {


    .navbar .nav > li > .dropdown-menu:after {
        border: none;
    }

    .navbar .nav > li > a, .navbar .dropdown-menu a {
        border-radius: 0;
        color: white;
        font-weight: normal;
        padding: 10px 10px 11px;
    }


    .dropdown-toggle > a:visited {
        border: none;
    display: none;
    box-shadow: none;

    } 

  .dropdown-toggle > a:active {
    border: none;
    display: none;
    box-shadow: none;

  } 

    .navbar .nav > li > a:hover {
        display: none;
    }

    .navbar .nav > li > a {
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
    }


}

4


источник


Ответы:


Попробуй это

.dropdown a {
background-color:#fff transparent !important; }

Это может сделать сброс dropdown класса из bootstrap


0



CSS outline: none; будет работать, и скрыть синюю рамку на фокусе,

но имейте в виду, что это поведение браузера по умолчанию в Chrome, FF и Safari, и это затруднит перемещение людей с определенным углом зрения на ваш сайт.

Вы должны добавлять его только к несуществующим элементам на вашей странице.


0



add! important для вас css, который вы хотите переопределить. Пример:

.nav-collapse .nav > li > a:hover, .nav-collapse .nav > li > a:focus, .nav-collapse .dropdown-menu a:hover, .nav-collapse .dropdown-menu a:focus{
    background-color: #009999 !important;
  }

0



Попробуйте добавить этот css в свой a элементы:

a,
a:link,
a:hover,
a:visited,
a:active,
a:focus
  background-color: transparent;

Это работает для выпадающего меню бутстрапа в порядке и должно работать и в вашем случае. Также добавьте !important если это необходимо.

Обратите внимание, что у вас есть 4 одинаковых идентификатора , это выглядит немного сложнее.


0