有没有办法在HTML5数据列表选项上应用CSS样式?


83

我想修改显示数据列表中不同选项列表的方式。是否可以在其上应用某些CSS属性?

<input list="languages" id="language_id">
<datalist id="languages">
      <option value="html">HTML</option>
      <option value="java">Java</option>
      <option value="perl">Perl</option>
      <option value="php">PHP</option>
      <option value="ruby-on-rails">Ruby on Rails</option>
</datalist>

我试过了

option {
    background: red;
}

但它似乎不起作用。


Answers:


82

select元素一样,datalist元素在样式上几乎没有灵活性。如果这是您要问的问题,则不能为任何建议的术语设置样式。

浏览器为这些元素定义自己的样式。


136
这真是太可悲了
劳埃德银行

4
相关:Firefox的供应商特定的CSS扩展名列表(其中包括如占位符,但没有像DataList控件):developer.mozilla.org/en-US/docs/Web/CSS/Reference/...
ANeves认为SE是邪恶的

我希望有一种方法能够持续改变原生元素的样式,例如数据列表和选择
t3__rry

-6

尝试:

input[list]
{
  background: red;
}

5
在Firefox 30中,input[list]设置文本框的样式,而不是列表的样式。在IE 11中,它为文本框列表设置样式。
达伦·格里菲斯
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.