Weird blue outline/border search button iOS

Question

I've got a weird blue border that only seems to appear on iOS.

enter image description here

I think I've tried every :focus :active variation possible and I just can't find it and I don't even can reproduce te border in any inspect on any browser. So I'm a bit lost.

This is the code

<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

It may not be the right or perfect answer, but have you tried to use !important?

In combination with :focus or :active it should work. If it is only on IOS this could probably help you: https://developer.mozilla.org/de/docs/Web/CSS/WebKit_Extensions