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

问题描述 投票：0回答：5

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

$(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;
添加到按钮以及内部的跨度标签，但这也不起作用。

这不是一个大问题，因为通常只有当用户在手机上查看我的网站时此按钮才会可见，并且问题不会在那里发生。但这真的让我很恼火，我想修复它，因此非常感谢任何帮助:)

提前致谢。

更新

感谢您的所有回答。你们给出的解决方案是添加 

.navbar-toggle {outline: 0;}
或 
outline: none;
或此的一些变体。但这对我不起作用。事实上，当我查看您的所有片段时，它们仍然存在相同的问题。知道为什么我没有看到和你们一样的结果吗？

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

另一个更新

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

再次感谢您的所有回答！

javascript html css safari navbar
5个回答
4
投票

尝试将轮廓设置为无：

button.navbar-toggle{ outline:none; }


$(document).ready(function() {

  $(".navbar-toggle").on("click focus", 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;
  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;
}
<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>

2
投票

您也可以在不同的浏览器中找到此行，并且根据您的操作系统具有不同的颜色，它是一个大纲。

正如 W3Schools 所描述的：

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

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

可以设置的属性有（按顺序）：轮廓颜色、 轮廓样式、轮廓宽度。

如果缺少上述值之一，例如“轮廓：实心#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>

编辑：正如提到的这里和这里，

outline: none;
和
outline: 0;
可以给你类似的视觉结果，但我肯定会去
outline: 0;
。

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

0
投票

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

.navbar-toggle:focus {
   outline: none;
}
0
投票

尝试下面的CSS。

* {
  outline: none;
}
0
投票

对于使用 Tailwind CSS 的人来说，

outline-none
可以解决问题。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.