Shopify Question posted in
The Shopify help center can be found here.

Can't able to change Email and Password input element background color Shopify

I’m in the really big problem I cant able to change Email and Password input element background color in Shopify site in both login and register page.

I just realized that the problem is only in chrome only.

Tags:

2

Answers


  1. 0

    Try putting this in your css, it should override the current styles…

    input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="file"],
input[type="number"],
input[type="tel"],
textarea,
select {
  background-color: #ff9900;
}

    However

    if its auto-complete thats only happening in chrome then this should fix it:

    You can use any color e.g. white, #DDD, rgba(102, 163, 177, 0.45).

    /* Change the white to any color ;) */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px white inset;
}

    Additionally, you can use this to change the text color:

    /*Change text in autofill textbox*/
input:-webkit-autofill {
    -webkit-text-fill-color: yellow !important;
}
    Login or Signup to reply.
  2. 0

    From MDN:

    Specificity is the means by which browsers decide which CSS property
    values are the most relevant to an element and, therefore, will be
    applied

    The browser assings a weight based on the selector types that arre applied to the same element, the one with the bigger weight gets applied, so in your case the selector #customer_login input[type="email"] has a bigger weight than even an inline style, so adding !important to your rule does the trick here (taken from the same topic):

    When an important rule is used on a style declaration, this
    declaration overrides any other declarations

    TL;DR This does the trick:

    background-color: red !important;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search