我有一个奇怪的蓝色边框,似乎只出现在 iOS 上。
我想我已经尝试了所有可能的 :focus :active 变化,但我找不到它,我什至无法在任何浏览器的任何检查中重现 te 边框。所以我有点失落。
这是代码
<li class="menu--list__items zoeken nav-item">
<a class="menu--list__items--link nav-link" href="#" id="zoekenDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Zoeken
<i class="material-icons">
search
</i>
</a>
<div class="dropdown-menu animate slideIn zoeken--dropdown" aria-labelledby="zoekenDropdown">
<input class="form-control dropdown-item" id="zoeken-term" type="search" name="q" placeholder="Waar bent u naar op zoek?" autocomplete="off" aria-label="Search">
<button type="submit" class="zoeken--dropdown--btn">
<i class="material-icons">
search
</i>
</button>
</div>
</li>
答案 0 :(得分:1)
这可能不是正确或完美的答案,但您是否尝试过使用 !important
?
结合 :focus 或 :active 应该可以工作。 如果它仅在 IOS 上,这可能会对您有所帮助: https://developer.mozilla.org/de/docs/Web/CSS/WebKit_Extensions
答案 1 :(得分:1)
This worked for me in the end
&:focus {
outline: 0 !important;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
答案 2 :(得分:0)
我认为您应该尝试 outline: none;
并且 :focus :active 不起作用在这种情况下。
TYR outline: none;
看看这个...
.btn{
border: none;
outline: none;
}
<html>
<body>
<button class="btn">Submit</button>
</body>
</html>