2

I have a table with input fields in each element with a background-color: transparent. When I enter text into the input field the background color of the input field changes to a grey color.

Anybody have any idea why the color changes and what I can do to prevent this?

Thanks!

bigtoe51
  • 33
  • 2
  • 5
  • 1
    You should add some code here please read [Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) – Sameer Jul 05 '21 at 02:43

3 Answers3

2

the reason is due to the autocomplete feature being turned on, you can use this to change the color;

/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

you can choose any color, except transparent, if you need the color to be transparent certain solutions exist

here is a link to the answer and other solutions Removing input background colour for Chrome autocomplete?

Ibrahim Mohammed
  • 21
  • 4
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/late-answers/30781856) – Ghost Ops Jan 14 '22 at 08:16
  • 1
    ok thanks, i'll edit the answer. – Ibrahim Mohammed Jan 15 '22 at 10:16
  • If I could give you more than one point here I would! I spent hours rephrasing my question on Google to find this answer. THANK YOU! – sunsetsurf May 11 '22 at 16:34
1
td input:focus{
    background: transparent;
}

I think this should fix it, assuming your inputs are inside of <td> tags ofc. You can change that query to anything, so long as you are selecting it on :focus.

OOPS Studio
  • 732
  • 1
  • 8
  • 25
  • I've tried to add that but that seems to take care of the background color when I'm entering text into the input. Once the text is entered though is when I'm having the issue.. does that make sense? – bigtoe51 Jul 06 '21 at 00:45
  • ***When I'm testing I'm given my previous entries as options in the form of a dropdown list (I didn't program this in). When I select one of these as an option that's when the background color changes. When I enter something new though the background is transparent as expected. Any thoughts? – bigtoe51 Jul 06 '21 at 00:48
0

as you said you have "background-color: transparent", its fine, but :focus state is a different state for element, you might have another css which are changing :focus state of your input field, I will suggest to use

input:focus{
    background-color: transparent; /* or any other color you want when user starts typing in input */
}

also make sure any other class is not effecting on that input, find that class name and you can do like

.classname:focus{
    background-color: red; 
}
Frontend Dev Web Accessibility
  • 215
  • 2
  • 9
  • I've tried to add that but that seems to take care of the background color when I'm entering text into the input. Once the text is entered though is when I'm having the issue.. does that make sense? – bigtoe51 Jul 06 '21 at 00:45
  • ***When I'm testing I'm given my previous entries as options in the form of a dropdown list (I didn't program this in). When I select one of these as an option that's when the background color changes. When I enter something new though the background is transparent as expected. Any thoughts? – bigtoe51 Jul 06 '21 at 00:48
  • can you share codes or show me if its hosted somewhere? – Frontend Dev Web Accessibility Jul 06 '21 at 05:20