CODEWITHSUNDEEP
javascriptjquerygoogle-chrome-extension
Luis Ramon Ramirez Rodriguez
Luis Ramon Ramirez Rodriguez

Reputation: 10383

Set background color of autocomplete on a chrome extension

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:

enter image description here

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:

enter image description here

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

Upvotes: 0

Views: 151

Answers (1)

deathstroke
deathstroke

Reputation: 603

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;
  }

Upvotes: 1

Related Questions