html - 如何设置列表输入的样式

Question

当我偶然发现列表时，我正在寻找一个自动完成的文本字段。

<label>Bad Habit
  <input list="badhabits" id="habits" name="habit"/>
</label>
<datalist id="badhabits"> 
  <option value="alcaholics">
  <option value="smoking">
</datalist>

它们可以工作，但我想知道如何设置它们的样式，就像您可以使用其他输入(按钮等)一样。我试过给它一个 id 并这样做

#habits{
    padding:5px;
    border:2px solid #ccc;
    -webkit-border-radius: 4px;
    border-radius: 5px;
}

我也试过

[type=list] {
    padding:5px;
    border:2px solid #ccc;
    -webkit-border-radius: 4px;
    border-radius: 5px;
}

但这也没有用。那么有人知道如何设置列表样式吗？

Answer 1

关于如何在输入元素的下拉列表中出现的 datalist 元素的选项设置样式，还有其他讨论。目前我不认为有办法做到这一点 - 如何解释这些元素的样式取决于浏览器。

重复 Is it possible to style the drop-down suggestions when using html5 datalist?