单击按钮时出现不需要的蓝色选择突出显示（仅限Safari）

时间：2016-05-16 11:44:24

标签： javascript html css safari navbar

我真的不确定该问题的标题，所以我认为最好的解释方法是使用一个片段：

$(document).ready(function () {

		$(".navbar-toggle").on("click", function () {

           $(".navbar").toggleClass("open");
           $(".navbar-toggle").toggleClass("open");

    });            
});
html {
    font-family: "Raleway", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-weight: normal;
    color: #888;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
p {
    margin: 0;
    padding: 0;
    font-weight: normal;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    border: none;
    -webkit-appearance: button;
    cursor: pointer;
}

.navbar {
    background: rgba(255, 236, 176, 0.97);
    color: #555;
    line-height: 50px;
    display: none;
    position: relative;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    z-index: 99;
}

.navbar-fixed {
    position: fixed;
    top: 0;
}

.navbar-brand {
    display: inline-block;
    padding: 0 15px;
}

.navbar-mobile {
    background: #ffecb0;
    position: fixed !important;
    top: -100%;
    display: block;
    height: 275px;
    width: 100%;
    overflow-y: auto;
    opacity: 0.0;
    transition: .3s ease
}

.navbar.open {
    opacity: 1.0;
    top: 0;
}

.navbar-mobile .container {
    padding: 0;
}

.navbar-toggle {
    background: #ffecb0;
    position: fixed;
    display: block;
    top: 10px;
    left: 15px;
    padding: 9px 10px;
    border-radius: 5px;
    z-index: 100;
    background-image: none;
    outline: none;
}

.navbar-toggle .icon-bar {
    background-color: #555;
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    transition: .3s ease;
}

.navbar-toggle .icon-bar+.icon-bar {
    margin-top: 4px;
}

.navbar-toggle.open .icon-bar:first-child {
    transform: translate(0, 6px) rotate(225deg);
}

.navbar-toggle.open .icon-bar:nth-child(2) {
    opacity: 0;
}

.navbar-toggle.open .icon-bar:last-child {
    transform: translate(0, -6px) rotate(135deg);
}

nav ul {
    list-style: none;
    text-align: center;
}

nav a {
    position: relative;
    display: block;
    font-size: 16px;
    font-weight: 500;
}

nav li a:hover {
    color: black;
    background-color: #ffe389;
}

nav li a.active {
    color: white;
    background-color: #847d64;
}
.btn {
     
}

.navbar-button {
    color: #fff;
    display: inline-block;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    text-align: center;
    overflow: hidden;
    transition: .3s;  
    background-color: #a48eff;
    border-color: #8c6aff;
    line-height: 1;
    padding: 10px 10px;
    margin: 0 15px;
}

.navbar-button:hover {
    background-color: #b9a8ff;
    color: white;
    border-color: #ad94ff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="navbar-toggle" type="button" role="button">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

        <nav class="navbar navbar-mobile">
            <div class="container">
                <a href="test.html" class="navbar-brand"></a>
                <div class="navbar-items">
                    <ul>
                        <li><a href="test.html" class="active">Home</a></li>
                        <li><a href="test2.html">Link 2</a></li>
                        <li><a href="test3.html">Link 3</a></li>
                        <li><a  class="button navbar-button" href="contact.html">Call to Action</a></li>
                    </ul>
                </div>
            </div>
        </nav>

正如您所看到的，我有一个移动导航栏折叠/展开按钮，工作正常。但出于某种原因，仅在Mac OS Safari中，当单击按钮时，某些内容会被选中，并且会出现蓝色突出显示。

我不知道造成这种情况的原因是什么，我尝试了一些不同的想法来解决它。正如您所看到的，我尝试将onfocus="blur()"添加到按钮，但这不起作用。我还尝试将user-select: none;添加到按钮以及内部的span标记，但这也不起作用。

这不是一个大问题，因为通常只有当用户在手机上查看我的网站并且问题没有出现时，此按钮才会显示。但这真的让我感到恼火，我想解决它，所以非常感谢任何帮助：）

提前致谢。

更新

感谢您的所有答案。您已经给出的解决方案是添加.navbar-toggle {outline: 0;}或outline: none;或其中的一些变体。但这不适合我。事实上，当我查看它们时，您的所有代码段仍然存在同样的问题。知道为什么我没有看到与你们相同的结果吗？

为了清楚我所看到的行为，这里是我刚刚打开并关闭导航菜单后点击按钮运行的Dev_NIX片段的屏幕截图：

enter image description here

另一个更新

我已经尝试在另一台Mac上从另一个版本的Safari运行此代码段并且没有问题！所以我想这只是我的Safari版本（9.1）的一个奇怪的错误。所以问题还没有解决，但它似乎对我来说是独一无二的，所以我不再担心它了。）

再次感谢您的所有答案！

4 个答案:

答案 0 :(得分：2)

尝试将大纲设置为无：

button.navbar-toggle{ outline:none; }

＆＃13;
＆＃13; 
$(document).ready(function() {

  $(".navbar-toggle").on("click focus", function() {

    $(".navbar").toggleClass("open");
    $(".navbar-toggle").toggleClass("open");

  });
});
＆＃13; 
html {
  font-family: "Raleway", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: normal;
  color: #888;
}
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
p {
  margin: 0;
  padding: 0;
  font-weight: normal;
}
a {
  text-decoration: none;
  color: inherit;
}
button {
  border: none;
  -webkit-appearance: button;
  cursor: pointer;
}
.navbar {
  background: rgba(255, 236, 176, 0.97);
  color: #555;
  line-height: 50px;
  display: none;
  position: relative;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  z-index: 99;
}
.navbar-fixed {
  position: fixed;
  top: 0;
}
.navbar-brand {
  display: inline-block;
  padding: 0 15px;
}
.navbar-mobile {
  background: #ffecb0;
  position: fixed !important;
  top: -100%;
  display: block;
  height: 275px;
  width: 100%;
  overflow-y: auto;
  opacity: 0.0;
  transition: .3s ease
}
.navbar.open {
  opacity: 1.0;
  top: 0;
}
.navbar-mobile .container {
  padding: 0;
}
.navbar-toggle {
  background: #ffecb0;
  position: fixed;
  display: block;
  top: 10px;
  right: 15px;
  padding: 9px 10px;
  border-radius: 5px;
  z-index: 100;
  background-image: none;
  outline: none;
}
.navbar-toggle .icon-bar {
  background-color: #555;
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  transition: .3s ease;
}
.navbar-toggle .icon-bar+.icon-bar {
  margin-top: 4px;
}
.navbar-toggle.open .icon-bar:first-child {
  transform: translate(0, 6px) rotate(225deg);
}
.navbar-toggle.open .icon-bar:nth-child(2) {
  opacity: 0;
}
.navbar-toggle.open .icon-bar:last-child {
  transform: translate(0, -6px) rotate(135deg);
}
nav ul {
  list-style: none;
  text-align: center;
}
nav a {
  position: relative;
  display: block;
  font-size: 16px;
  font-weight: 500;
}
nav li a:hover {
  color: black;
  background-color: #ffe389;
}
nav li a.active {
  color: white;
  background-color: #847d64;
}
.btn {} .navbar-button {
  color: #fff;
  display: inline-block;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1px;
  text-align: center;
  overflow: hidden;
  transition: .3s;
  background-color: #a48eff;
  border-color: #8c6aff;
  line-height: 1;
  padding: 10px 10px;
  margin: 0 15px;
}
.navbar-button:hover {
  background-color: #b9a8ff;
  color: white;
  border-color: #ad94ff;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="navbar-toggle" type="button" role="button">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

<nav class="navbar navbar-mobile">
  <div class="container">
    <a href="test.html" class="navbar-brand">Logo</a>
    <div class="navbar-items">
      <ul>
        <li><a href="test.html" class="active">Home</a>
        </li>
        <li><a href="test2.html">Link 2</a>
        </li>
        <li><a href="test3.html">Link 3</a>
        </li>
        <li><a class="button navbar-button" href="contact.html">Call to Action</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

您可以在不同的浏览器中找到不同颜色的此行，具体取决于您的操作系统，它是outline。

如W3Schools所述：

  

轮廓是围绕元素（在...之外）绘制的线   使元素“脱颖而出”。

     

轮廓简写属性将所有轮廓属性设置为一个   声明。

     

可以设置的属性是（按顺序）：outline-color，   大纲样式，轮廓宽度。

     

如果缺少上述值之一，例如“outline：solid＃ff0000;”，   将插入缺失属性的默认值（如果有）。

我会选择项目的类并将大纲设置为零。

.navbar-toggle {
    outline: 0;
}

一个有效的演示：

$(document).ready(function () {

		$(".navbar-toggle").on("click", function () {

           $(".navbar").toggleClass("open");
           $(".navbar-toggle").toggleClass("open");

    });            
});
html {
    font-family: "Raleway", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-weight: normal;
    color: #888;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
p {
    margin: 0;
    padding: 0;
    font-weight: normal;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    border: none;
    -webkit-appearance: button;
    cursor: pointer;
}

.navbar {
    background: rgba(255, 236, 176, 0.97);
    color: #555;
    line-height: 50px;
    display: none;
    position: relative;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    z-index: 99;
}

.navbar-fixed {
    position: fixed;
    top: 0;
}

.navbar-brand {
    display: inline-block;
    padding: 0 15px;
}

.navbar-mobile {
    background: #ffecb0;
    position: fixed !important;
    top: -100%;
    display: block;
    height: 275px;
    width: 100%;
    overflow-y: auto;
    opacity: 0.0;
    transition: .3s ease
}

.navbar.open {
    opacity: 1.0;
    top: 0;
}

.navbar-mobile .container {
    padding: 0;
}

.navbar-toggle {
    background: #ffecb0;
    position: fixed;
    display: block;
    top: 10px;
    left: 15px;
    padding: 9px 10px;
    border-radius: 5px;
    z-index: 100;
    background-image: none;
    outline: 0;                  /* <<== line added */
}

.navbar-toggle .icon-bar {
    background-color: #555;
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    transition: .3s ease;
}

.navbar-toggle .icon-bar+.icon-bar {
    margin-top: 4px;
}

.navbar-toggle.open .icon-bar:first-child {
    transform: translate(0, 6px) rotate(225deg);
}

.navbar-toggle.open .icon-bar:nth-child(2) {
    opacity: 0;
}

.navbar-toggle.open .icon-bar:last-child {
    transform: translate(0, -6px) rotate(135deg);
}

nav ul {
    list-style: none;
    text-align: center;
}

nav a {
    position: relative;
    display: block;
    font-size: 16px;
    font-weight: 500;
}

nav li a:hover {
    color: black;
    background-color: #ffe389;
}

nav li a.active {
    color: white;
    background-color: #847d64;
}
.btn {
     
}

.navbar-button {
    color: #fff;
    display: inline-block;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    text-align: center;
    overflow: hidden;
    transition: .3s;  
    background-color: #a48eff;
    border-color: #8c6aff;
    line-height: 1;
    padding: 10px 10px;
    margin: 0 15px;
}

.navbar-button:hover {
    background-color: #b9a8ff;
    color: white;
    border-color: #ad94ff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="navbar-toggle" type="button" role="button">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

        <nav class="navbar navbar-mobile">
            <div class="container">
                <a href="test.html" class="navbar-brand">Logo</a>
                <div class="navbar-items">
                    <ul>
                        <li><a href="test.html" class="active">Home</a></li>
                        <li><a href="test2.html">Link 2</a></li>
                        <li><a href="test3.html">Link 3</a></li>
                        <li><a  class="button navbar-button" href="contact.html">Call to Action</a></li>
                    </ul>
                </div>
            </div>
        </nav>

编辑：如上所述[{3}}和here，outline: none;和outline: 0;可以为您提供类似的视觉效果，但我会去outline: 0;肯定地。{/ p>

更新：您的屏幕截图看起来并不像大纲。您可以重新启动浏览器甚至计算机/设备吗？对我来说，这似乎是一个检查员的错误......

答案 2 :(得分：0)

这应该可以解决问题。焦点伪类是关键。

.navbar-toggle:focus {
   outline: none;
}

答案 3 :(得分：0)

尝试以下css。

* {
  outline: none;
}
相关问题
最新问题