奇怪的蓝色 outline/border 搜索按钮 iOS

Question

我有一个奇怪的蓝色边框，似乎只出现在 iOS 上。

enter image description here

我想我已经尝试了所有可能的 :focus :active 变体，但我就是找不到它，我什至无法在任何浏览器的任何检查中重现边框。所以我有点迷路了。

这是代码

<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>

Answer 1

这可能不是正确或完美的答案，但您是否尝试过使用 !important？

结合 :focus 或 :active 应该可以。如果它仅在 IOS 上，这可能会对您有所帮助： https://developer.mozilla.org/de/docs/Web/CSS/WebKit_Extensions

Answer 2

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; 
                }

Answer 3

我认为你应该尝试 outline: none; 和 :focus :active 在这种情况下无法工作。

TYR outline: none;

看看这个...

.btn{
  border: none;
  outline: none;
 }

<html>
<body>
<button class="btn">Submit</button>
</body>
</html>

奇怪的蓝色 outline/border 搜索按钮 iOS

Weird blue outline/border search button iOS

html

css

border

ios

bootstrap-4