点击时，HTML的div周围出现丑陋的边框。

9 浏览
0 Comments

点击时，HTML的div周围出现丑陋的边框。

我有一个由div构成的导航。当你点击一个div时，请求的页面会加载到另一个div中。\n我的问题是，Safari和Chrome在我点击的任何div周围都会出现一个丑陋的边框。\n如何去掉这个边框？\n我已经尝试过以下代码，但没有起作用：\n

*, *:focus, *::-moz-focus-inner, div, div:focus, div::-moz-focus-inner {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
    border: none;
    outline: none;
    -webkit-overflow-scrolling: touch;
}

0

2 答案

0 Comments

问题的原因是CSS中的outline属性导致在点击div元素时出现丑陋的边框。解决方法是在CSS中移除outline属性或将其设置为none。

具体方法是通过以下代码将CSS中的outline属性移除或设置为none：

.that-div {
  outline: 0;
}

0
0 Comments

在HTML中，当我们点击一个

元素时，会发现周围会出现一个丑陋的边框。这是因为浏览器默认为被点击的元素添加了一个outline样式。如果我们想去掉这个边框，可以使用一些CSS样式来解决。

解决方法如下：

div:focus {
  outline: none;
}

但是，有一些浏览器，比如Chrome和Firefox，在点击

元素时，会有一个蓝色的边框出现。这是因为浏览器将

元素设置为可选中的元素，以便用户可以选择和复制其中的文本。如果我们想去掉这个蓝色的边框，可以使用下面的CSS样式来解决。

解决方法如下：

div:focus {
  outline: none;
}
div::-moz-focus-inner { /* Remove Firefox dotted outline */
  border: 0;
}

除此之外，还可以使用以下CSS样式来禁用用户选择元素的功能。

解决方法如下：

div {
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
}

通过使用上述CSS样式，我们可以解决在点击

元素时出现的丑陋边框的问题，并且还可以禁用用户选择元素的功能。这样可以提升用户体验，使界面更加美观。

0