格式化 <datalist> HTML？ [复制]

Question

我想知道是否可以设置<datalist> 的样式（例如：jsfiddle.net）。

我在其中一个选项上尝试过内联 css，例如 background-color:#F00 (x)，但什么也没发生。有没有人成功地设计过它们？或任何教程链接，因为我似乎找不到任何链接。

提前感谢您的帮助。

Answer 1

像普通下拉菜单<datalists> 的样式不是很灵活。你不能用css来设计它们。每个浏览器都处理自己的 <datalist> 元素样式。

来自 Tuts+ 网站：

由于更广泛的浏览器支持只是最近才出现的，因此可以预见 供应商的解释。 Firefox 和 Chrome 使用 OS 主题 用于列表选项的样式，而 Opera 将继承某些 输入字段中的样式（颜色，字体系列）。除此之外， 忘记使用 CSS 设置 datalist 元素的样式。

jquery 示例：

HTML：

<input type='text' id='input'>

Javascript：

$(document).ready(function() {
    var arrayOfOptions = [
        "Option 1",
        "Option 2",
        "etc"
    ];

    $("#input").autocomplete({source: arrayOfOptions});
});