将 CSS 放入 <datalist>答案

【问题标题】：Putting CSS to <datalist>将 CSS 放入 <datalist>
【发布时间】：2015-01-19 17:45:48
【问题描述】：

所以现在我有一个简单的数据列表下拉菜单，我想更改它的 CSS，以便样式与网站上的其他字段匹配。然而，我是一个网页设计新手，我对完成这个过程感到有点困惑。

<input list="ServiceCity">
<datalist id="ServiceCity" name="ServiceCity"class = "atl_services">
            <option value "" disabled selected>Select City/County</option>
            .......other values
        </datalist>

这是我要使用的 CSS

input{
    padding: 7px;
    outline: none;
    max-width: 100%;
    margin-bottom: 5px;
    border-width: 1px;
    border-style: solid;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px
    width: 88.5%;
    border: 1px solid GREY;
    box-shadow: 0px 0px 3px GREY;
    }

我也有 CSS，我认为内联 CSS 是最简单的，但如果有人能指导我完成那将非常感谢！

【问题讨论】：

数据列表的样式取决于浏览器，列表的样式选项很少。你可以在你的网站上使用 jquery 吗？我怀疑投反对票的原因是因为这里已经询问了一百万次设置数据列表的样式
aw 所以我想我不能只内联数据列表样式？
您只能设置输入框的样式以及选项列表、颜色等的一些选项。
Is there a way to apply a CSS style on HTML5 datalist options?的可能重复

标签： html css html-datalist

【解决方案1】：

Per MDN:

有些元素根本无法使用 CSS 设置样式。其中包括所有高级用户界面小部件，例如范围、颜色或日期控件以及所有下拉小部件，包括 <select>、<option>、<optgroup> 和 <datalist> 元素。众所周知，文件选择器小部件根本无法设置样式。新的<progress> 和<meter> 元素也属于这一类。

【讨论】：

这是设计师最悲哀的答案。
这应该是这个问题及其所有重复项的正确答案

【解决方案2】：

我已经为列表输入提供了 name 属性，如下所示，并且还添加了具有完美名称的 css 输入。

<input list="ServiceCity" name="service-city">
<datalist id="ServiceCity" name="ServiceCity"class = "atl_services">
            <option value "" disabled selected>Select City/County</option>
            .......other values
        </datalist>

CSS代码如下：

input[name="service-city"] {
  border: 2px solid orange;
  border-radius: 10px 10px 10px 10px;
  font-size: 18px;
  padding: 5px;
  height: 35px;
  width: 350px;
}

谢谢，

【讨论】：