Question

所以现在我有一个简单的datalist下拉菜单，我想更改它的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，但是如果有人能指导我，那将非常感谢！

Answer 1

Per MDN：

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

Answer 2

我已经为列表 Input 赋予了 name 属性，如下所示，并且还添加了具有完美工作名称的 css Input。

<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;
}

谢谢，

将CSS放到<datalist> </datalist>

2 个答案: