参见此处:http://jsfiddle.net/zemar (必须用Firefox或Opera才能看到)
当您点击 select
时,下拉菜单的样式会匹配,但如果您开始从文本框中的数据列表中输入术语,则出现的建议不会被样式化因此它与其余样式不匹配。
是否可以设置下拉菜单的样式?
* {margin:0; padding:0; font-family: arial, sans-serif; font-size: 40px; font-weight: bold; color: #444;}
body {height:100%; background:#F4F3EF;}
.select select, .input input {background: transparent; width: 220px; overflow:hidden; height: 65px; padding-left: 5px;
padding-bottom: 5px; -webkit-appearance: none; -moz-appearance:none; appearance:none; border:none; cursor:pointer;}
.select select {padding-top: 5px;}
.select, .input {float:left; width: 220px; height: 65px; margin-right: 20px; overflow: hidden; background: #ddd;
border: 1px solid #ccc;}
<div class="select">
<select id="count">
<option value="1">A</option>
<option value="2">A pair of</option>
<option value="3">A few</option>
<option value="4">Four</option>
</select>
</div>
<div class="input">
<input type="text" id="query" list="ingredients" placeholder="lamb"></input>
<datalist id="ingredients">
<option value="lamb">
<option value="beef">
<option value="chicken">
<option value="fish">
<option value="vegetarian">
</datalist>
</div>
最佳答案
样式 datalist
仅使用 CSS 是不可能的跨浏览器的。
Internet Explorer、Firefox、Chrome 和 Edge 将基本样式应用于 input[list]
元素,但都不是 datalist
, 也不是它的 option
子元素。
参见 CodePen example .
引自 MDN “Styling HTML forms – the ugly” :
Some elements simply can't be styled using CSS. These include: all advanced user interface widgets, such as range, color, or date controls; and all the dropdown widgets, including
<select>
,<option>
,<optgroup>
and<datalist>
elements.
规避此 UI 限制的一种非常常见的方法是提供一个基于 JavaScript 的小部件,它可以为禁用 JS 的用户回退到 HTML5 输入+数据列表组合。
关于css - 使用 HTML5 <datalist> 时是否可以设置下拉建议的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10062414/