Set background color of autocomplete on a chrome extension

Question

I have create a chrome extension to autocomplete forms.

The code I'm using to autocomplete is basically the once from this site

$( function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  } );

It does its job, but I'm having issues to read the suggestion because the background is transparent as shown in the below image:

Is it possible from the extension to set a solid white background color?

EDIT:

I'm trying to change it as suggested. This changes work:

document.querySelector("[id='tags']").style.color="Red"
document.querySelector("[id='tags']").style.backgroundColor="Red"

But that only changes the text box:

And I want to chang the background on the options only.

I tried this one:

document.querySelector("[id='tags']").background-color =  "Red"

And got the following error:

Uncaught SyntaxError: Invalid left-hand side in assignment

I don't know that plugin but for the standard Chrome'a autocomplete it's different, see [Google Chrome form autofill and its yellow background](https://stackoverflow.com/q/2920306) — wOxxOm, May 29 '20 at 05:36

score 1 · Accepted Answer · answered May 29 '20 at 05:25

1

the website you have referenced adds <ul> when showing autocomplete. You need to add a css for ul to have a background-color. So the following code works for me.

  ul#ui-id-1 {
   background-color: red;
  }

answered May 29 '20 at 05:25

mkamranhamid

583
4
18

Where in the code will go that part? is it inside the JS function? – Luis Ramon Ramirez Rodriguez May 29 '20 at 05:26
you can add a css file with the css code and it should work. I havent used jqueryui. I'm just giving you from the common javascript background – mkamranhamid May 29 '20 at 06:20
I tried to do it with JS, that part in not working for me, I just updated the question with the results I got – Luis Ramon Ramirez Rodriguez May 30 '20 at 17:01
1

if you want to target id then you can target the `ul` id which is `ui-id-1` so your code will look something like this `document.getElementById('ui-id-1').style.backgroundColor = 'red'` – mkamranhamid May 31 '20 at 19:11

Set background color of autocomplete on a chrome extension

1 Answers1