CODEWITHSUNDEEP
css
Jerry Zhang
Jerry Zhang

Reputation: 1236

CSS change inputed fields background-color?

I wrote a user login page, but I can not change inputted fields backgound color.

.form-signin-row {
    display: block;
    width: 100%;
    height: 51px;
    padding: 6px 12px;
    font-size: 14px;
    margin-bottom: 19px;
    line-height: 1.42857143;
    background-color: #F0EEF0;
    border: 1px solid #DCDCDC;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

Like this:

enter image description here

I found "user agent stylesheet":

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189);
    background-image: none;
    color: rgb(0, 0, 0);
}

Just chrome cached my username and password, NOT work. If I clear cached, work well.

I try to override:

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { 
     background-color: #fff;
}

still not work:

enter image description here

Upvotes: 1

Views: 2415

Answers (1)

Marcos Pérez Gude
Marcos Pérez Gude

Reputation: 22158

Use the same class to override the default styles of the chrome browser (that behaviour is a big crap to designers)

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { 
     background-color: #fff !important;
     -webkit-box-shadow: 0 0 0px 1000px white inset;
}

Upvotes: 3

Related Questions