当使用HTML5的<datalist>时，是否可以对下拉建议进行样式设置？

Question

当使用HTML5的<datalist>时，是否可以对下拉建议进行样式设置？

34

请看这里：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>

- dudledok

3

我认为无法对数据列表进行样式设置，我建议您使用一些自动完成插件。 - Hemesh Singh

那目前来看，这是最好的方式，因为webkit和IE浏览器不支持它。 - dudledok

我想知道是否有一种伪类可以允许样式化。 - starbeamrainbowlabs

2

可能是如何在HTML5 datalist选项上应用CSS样式的方法？的重复问题。 - Volker E.

4个回答

7

据我所知，您无法为<datalist>标签设置样式。我建议使用JQuery扩展自动完成。因此，您需要在HTML文档中包含JQuery。这里是由Google托管的链接：请参见此处

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script

注意：通过将其放置在文档末尾并使用$(document).ready();，您可以获得更好的性能。

例如：

HTML：

<input type='text' id='input'>

Javascript:

$(document).ready(function() {
    var arrayOfOptions = [
        "Option 1",
        "Option 2",
        "etc"
    ];

    $("#input").autocomplete({source: arrayOfOptions});
});

注意：以下代码未经测试！

来源：http://jqueryui.com/autocomplete/

您可以像样式导航一样对其进行样式设置。以下是一些可供您设置样式的类：

.ui-autocomplete span.hl_results {background-color: #ffff66;}
.ui-autocomplete-loading {} //the object while it's loading (in the event of Ajax, in this case would not need this one
.ui-autocomplete {
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 5px;
}

.ui-autocomplete li {font-size: 16px;}
html .ui-autocomplete {
    height: 250px;
}

- acrawly

0

使用CSS可以对数据列表进行样式设置，但并非总是如此。这里有一个示例，其中使用了style="range"的输入框。

原帖作者想要对下拉菜单中的选项进行样式设置，但在2023年11月（尚）不可行。

一个示例：

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 250px;
  background: #eee;
  font-size: 1rem;
  padding: 10px;
  border: 1px solid #000;
}

.slider-container {
  display: flex;
  gap: 10px;
  height: 100%;
  margin: 10px;
}

datalist {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #333;
  height: 300px;
}

#drGradeSlider {
  height: 300px;
  width: 30px;
  border: 1px solid #000;
}

input[type="range"] {
  appearance: slider-vertical;
}

input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(red, yellow, green);
  accent-color: #023b6d;
  cursor: pointer;
  width: 1rem;
  border-radius: 3rem;
}

input[type="range"]::-webkit-slider-thumb {
  height: 20px;
  width: 20px;
  background: #023b6d;
  transform: scale(1.5);
  cursor: grab;
}

input[type="range"]:hover::-webkit-slider-thumb {
  background: #023b6d;
}

input[type=range]::-webkit-slider-thumb:active {
    cursor: -webkit-grabbing;
}

<main id="main">
  
  <h4>Diabetic Retinopathy Grade</h4>
  <div class="slider-container">
  
  <input id="drGradeSlider" type="range" list="tickmarks" class="vertical-slider" min="0" max="5" step="1" value="0">

  <datalist id="tickmarks">
    <option value="5" label="PDR"></option>
    <option value="4" label="Severe NPDR"></option>
    <option value="3" label="Moderate NPDR"></option>
    <option value="2" label="Mild NPDR"></option>
    <option value="1" label="No retinopathy"></option>
    <option value="0" label="Not gradable"></option>
  </datalist>
  </div>                                  
</main>

看这里，这是一个不同风格的datalist版本。

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 250px;
  background: #eee;
  font-size: 1rem;
  padding: 10px;
  border: 1px solid #000;
}

.slider-container {
  display: flex;
  gap: 10px;
  height: 100%;
  margin: 10px;
}

datalist {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #333;
  height: 300px;
}

#drGradeSlider {
  height: 300px;
  width: 30px;
  border: 1px solid #000;
}

input[type="range"] {
  appearance: slider-vertical;
}

input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(red, yellow, green);
  accent-color: #023b6d;
  cursor: pointer;
  width: 1rem;
  border-radius: 3rem;
}

input[type="range"]::-webkit-slider-thumb {
  height: 20px;
  width: 20px;
  background: #023b6d;
  transform: scale(1.5);
  cursor: grab;
}

input[type="range"]:hover::-webkit-slider-thumb {
  background: #023b6d;
}

input[type=range]::-webkit-slider-thumb:active {
    cursor: -webkit-grabbing;
}

datalist option {
  color: #F00;
  font-size: 0.8em;
  padding: 0.3em 1em;
  background-color: #ccc;
  cursor: pointer;
}

<main id="main">
  
  <h4>Diabetic Retinopathy Grade</h4>
  <div class="slider-container">
  
  <input id="drGradeSlider" type="range" list="tickmarks" class="vertical-slider" min="0" max="5" step="1" value="0">

  <datalist id="tickmarks">
    <option value="5" label="PDR"></option>
    <option value="4" label="Severe NPDR"></option>
    <option value="3" label="Moderate NPDR"></option>
    <option value="2" label="Mild NPDR"></option>
    <option value="1" label="No retinopathy"></option>
    <option value="0" label="Not gradable"></option>
  </datalist>
  </div>                                  
</main>

- RWC

0

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 250px;
  background: #eee;
  font-size: 1rem;
  padding: 10px;
  border: 1px solid #000;
}

.slider-container {
  display: flex;
  gap: 10px;
  height: 100%;
  margin: 10px;
}

datalist {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #333;
  height: 300px;
}

#drGradeSlider {
  height: 300px;
  width: 30px;
  border: 1px solid #000;
}

input[type="range"] {
  appearance: slider-vertical;
}

input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(red, yellow, green);
  accent-color: #023b6d;
  cursor: pointer;
  width: 1rem;
  border-radius: 3rem;
}

input[type="range"]::-webkit-slider-thumb {
  height: 20px;
  width: 20px;
  background: #023b6d;
  transform: scale(1.5);
  cursor: grab;
}

input[type="range"]:hover::-webkit-slider-thumb {
  background: #023b6d;
}

input[type=range]::-webkit-slider-thumb:active {
    cursor: -webkit-grabbing;
}

<main id="main">
  
  <h4>Diabetic Retinopathy Grade</h4>
  <div class="slider-container">
  
  <input id="drGradeSlider" type="range" list="tickmarks" class="vertical-slider" min="0" max="5" step="1" value="0">

  <datalist id="tickmarks">
    <option value="5" label="PDR"></option>
    <option value="4" label="Severe NPDR"></option>
    <option value="3" label="Moderate NPDR"></option>
    <option value="2" label="Mild NPDR"></option>
    <option value="1" label="No retinopathy"></option>
    <option value="0" label="Not gradable"></option>
  </datalist>
  </div>                                  
</main>

- Deepak_Thakur_3

你好Deepak_Thakur_3。欢迎来到Stackoverflow。你发表的答案是从我几分钟前发表的答案中复制的。这并不完全是本意。也许你不知道Stack overflow的工作原理，或者想尝试一些东西。没关系。至少你知道如何发表答案。我已经提交了删除你的答案的请求（标记了它）。没有恶意。继续参与吧！ - undefined

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Volker E. · Accepted Answer

跨浏览器仅使用CSS无法对datalist进行样式设置。 Internet Explorer、Firefox、Chrome和Edge会对input[list]元素应用基本样式，但既不会对datalist，也不会对其option子元素进行样式设置。

请参见CodePen示例。

引用自MDN “Styling HTML forms – the ugly”：

某些元素无法使用CSS进行样式设置。这些元素包括：所有高级用户界面小部件，例如范围、颜色或日期控件；以及所有下拉小部件，包括<select>、<option>、<optgroup>和<datalist>元素。

规避此UI限制的一种非常常见的方法是提供一个基于JavaScript的小部件，为禁用JS的用户提供HTML5输入+数据列表组合的备选方案。