奇怪的蓝色轮廓/边框搜索按钮iOS

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

我有一个奇怪的蓝色边框，似乎只出现在 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>

html css ios bootstrap-4 border
3个回答
3
投票

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

!important
吗？

与 

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

3
投票
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; 
                }
0
投票

我认为你应该尝试 

outline: none;
和 :focus :active 在这种情况下不起作用。

蒂尔

outline: none;

看看这个...

.btn{
  border: none;
  outline: none;
 }
<html>
<body>
<button class="btn">Submit</button>
</body>
</html>

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