jQuery 自动完成 - 如何 CSS 设置 TextArea 下拉菜单的样式？

Question

我在我的项目中使用 TextArea 以及 jQuery 自动完成功能。

HTML 代码：

<textarea class='autoExpand' rows='5' data-min-rows='5' id='textarea'></textarea>

我有 javascript 代码通过使用 jQuery 自动完成来处理下拉菜单。我可以轻松更改 TextArea 本身的样式：

    textarea{
    font-family: "Helvetica", Times, serif;
    display: block;
    background-color: #fffdb5;
    resize: none;
    }

但是，我不知道如何 CSS 设置下拉菜单的样式。我需要能够更改下拉菜单的背景以及文本和所选项目背景的颜色。

为了说明，这就是我所指的：

Answer 1

我看了这里https://jqueryui.com/autocomplete/

鼠标右键单击下拉元素并选择 "inspect element"（在 firefox 中）帮我找到了它：

.ui-menu .ui-menu-item-wrapper { /* the selector */
    position: relative; /* pre-existing css */
    padding: 3px 1em 3px .4em; /* pre-existing css */
    color: red; /* new css */
    background: yellow; /* new css */
}

Answer 2

如何设置所选项目背景的样式：

.ui-widget input.ui-autocomplete-input
{
    background: pink; /* new css */
}

jQuery 自动完成 - 如何 CSS 设置 TextArea 下拉菜单的样式？

jQuery Autocomplete - How to CSS style the TextArea drop-down menu?

html

javascript

css

jquery

textarea