Form autofill styling

Form components
1

Has anyone been able to override the browser changing the styling of input fields when autofill is active? The coloring is tolerable in Chrome but in Safari it is awful when using the “dark” theme variant. Here is the form as I am using it:

    <form id="login" mbsc-form class="md-login-form content" autocomplete="on" method="post" action="Default.aspx/ClientLogin" runat="server">
        <div class="md-logo"></div>
        <div class="mbsc-form-group-inset">
            <label>Member ID:</label>
            <label>
                <input mbsc-input id="MemberID" name="MemberID" type="username" autocomplete="username" placeholder="Member ID..." data-input-style="outline" data-label-style="stacked" runat="server" />
            </label>
            <label>Password:</label>
            <label>
                <input mbsc-input id="Password" name="Password" type="password" autocomplete="current-password" placeholder="Password..." data-password-toggle="true" data-icon-show="eye" data-icon-hide="eye-blocked" data-input-style="outline" data-label-style="stacked" runat="server" />
            </label>
            <div class="mbsc-btn-group-block">
                <button id="submit" mbsc-button type="submit">Sign In</button>
            </div>
        </div>
    </form>
2

Hi @Todd_Martin :wave:

You can change the style of input fields when autofill is active, with custom CSS coding. For example:

.mbsc-ios-dark .mbsc-input-wrap input:-webkit-autofill {
    box-shadow: 0 0 0px 1000px #66696f inset;
    -webkit-text-fill-color: #fff;
}

.mbsc-ios-dark .mbsc-input-wrap input:-webkit-autofill ~ .mbsc-input-fill {
    background: #66696f;
}