1

I am using a datalist to display some options, but I need to set the background of the options to white. I've tried playing around with the background-colour element, but no matter what I do the options always have a black background.

datalist {
  position: absolute;
  background-color: white;
  font-family: sans-serif;
  font-size: 0.8rem;
}
<html>
<head>
    <link rel="stylesheet" href="test.css">
</head>
    <body>
        <input
          list="datalist"
          name="option"
          id="input"
          autocomplete="off"
        >

        <datalist id="datalist">
          <option>Carrots</option>
          <option>Brocolli</option>
          <option>Lettuce</option>
        </datalist>
    </body>
</html>
Renma
  • 81
  • 1
  • 11
  • 1
    `datalist` can't really be styled since the browser decides on how that element is displayed. You'd have to craft your own datalist with stylable HTML elements. – NullDev Feb 03 '21 at 10:50

1 Answers1

1

datalist elements unfortunately cannot be styled directly. They receive their style by the current browser. See Is there a way to apply a CSS style on HTML5 datalist options?

JKD
  • 1,279
  • 1
  • 6
  • 26