'<input> type color change not working

I am trying to change the background color of input type. It is working fine in firefox but not in chrome. My style is being overridden by user agent stylesheet. Is there any way by which i can override user agent stylesheet for chrome.

.form-list input, textarea {
  background-color : #F5F5F2;
}
htmlcss


Solution 1:[1]

There are a few ways you could use !important but this prevents custom stylesheets from taking effect and is kind of a bad practice.

I would suggest making sure your rules are more specifc so listing the div's for example that are surrounding the control.

div > div > .form-list { background-color: #F5F5F2; }

Solution 2:[2]

Your Code should work as it is, As it works fine for me :

Can you please post your code so I can take a look?

There is similar question you can check here.

.form-list input, textarea {
  background-color : red;
}
<div class="form-list">
    <input type="text" name="t" />
    <textarea></textarea>
</div>

Solution 3:[3]

I found one solution which is working. Hope it will help others too.

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #F5F5F2 inset;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 SharpCode
Solution 2 Community
Solution 3 Aditya Kumar

Related Questions