html - 格式化 <datalist> HTML？

Question

我想知道是否可以设置 <datalist> 样式(例如:jsfiddle.net)。

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

感谢您提前提供帮助。

Answer 1

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

来自 Tuts+ 网站:

Since wider browser support is only recent, there are predictable interpretations by the vendors. Firefox and Chrome use the OS theme for styling of the list options, whilst Opera will inherit certain styles (color, font-family) from the input field. Other than that, forget styling the datalist element with CSS.

jquery 示例:

HTML:

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

Javascript:

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

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