Cannot remove white input background in safari, css not applied-CodePudding

I'm working on this web application. The client is testing it on an iPhone and sees white background behind the inputs. I don't have an iPhone, but I used this emulator and it shows white backgrounds too. I tried many tricks but still the white background is there. Also when I click on inputs, there is the blue outline around it, which shouldn't be there because I explicitly removed outline.

This is the style that I applied to my inputs. Any thoughts?

.contact-form .form-control, 
.contact-form .form-control:focus, 
.contact-form .form-control:focus-visible, 
.contact-form .form-control:focus-within, 
.contact-form .form-control:active, 
.contact-form .form-control:target, 
.contact-form .form-control:visited {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    background-clip: padding-box !important;
    background-image: linear-gradient(transparent,transparent) !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    resize: none;
    font-size: 1.6rem;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.5;
    height: auto;
}

CodePudding user response：

I installed Safari on my windows (version 5.1.7 which is deprecated BTW), and saw the problem. Seems like some of the selectors are not supported in Safari, and therefore it doesn't load any of it. So I removed focus-visible, focus-within and target selectors, and now it works as expected.