How to prevent dark mode effect on HTML form elements

I was working on a project, suddenly I faced an issue. There should be normal mode to html form elements for example input, select, and textarea fields when desktop dark mode is on. Dark mode affects the form element's background color, Then I started to look for a solution and found the answer. There is css property called color-scheme which indicates what color scheme can be used.

add color-scheme property as below

input, select, textarea{
color-scheme: light;
}

If I use light then it will use light mode only

input, select, textarea{
color-scheme: light dark;
}

If I use light dark then it will use dark mode and light mode both.

I used only light so that my form elements can remain as normal design, not dark color background.

Comments

[Sakifur Rahman]

Nice tips. Thanks