Weird blue outline/border search button iOS

Question

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

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

user_14865166 · Answer

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

user_7888841 · Answer

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

user_15203757 · Answer

I think you should try outline: none; and :focus :active won't work in this condition.

TYR outline: none;

Check out this...

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

Weird blue outline/border search button iOS

3 Answers