有没有办法在 HTML5 数据列表选项上应用 CSS 样式？

Question

我想修改我的数据列表的不同选项列表的显示方式。 是否可以在其上应用一些 CSS 属性？

<input list="languages" id="language_id">
<datalist id="languages">
      <option value="html">HTML</option>
      <option value="java">Java</option>
      <option value="perl">Perl</option>
      <option value="php">PHP</option>
      <option value="ruby-on-rails">Ruby on Rails</option>
</datalist>

我试过

option {
    background: red;
}

但它似乎不起作用。

Answer 1

与select元素一样， datalist元素在样式方面几乎没有灵活性。 如果这是您的问题，则您无法设置任何建议术语的样式。

浏览器为这些元素定义自己的样式。

Answer 2

我们可以尝试使用datalist-css这个包链接：-在此处输入链接描述

这是stackblitz示例

https://angular-datalist-option-hvvgcz.stackblitz.io

CSS将是：--

datalist {
  position: absolute;
  max-height: 20em;
  border: 0 none;
  overflow-x: hidden;
  overflow-y: auto;
}

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

/* option active styles */
datalist option:hover,
datalist option:focus {
  color: #fff;
  background-color: #036;
  outline: 0 none;
}

#browserdata option {
  font-size: 1.8em;
  padding: 0.3em 1em;
  background-color: #ccc;
  cursor: pointer;
}

Html 将是：-

<label for="browser">browser:</label>

<input
  list="browserdata"
  id="browser"
  name="browser"
  size="50"
  autocomplete="off"
/>

<datalist id="browserdata">
  <option>Brave</option>
  <option>Chrome</option>
  <option>Edge</option>
  <option>Firefox</option>
  <option>Internet Explorer</option>
  <option>Opera</option>
  <option>Safari</option>
  <option>Vivaldi</option>
  <option>other</option>
</datalist>

Answer 3

我在有人做的地方找到了这个代码笔： https ://codepen.io/sidd_dev/pen/qBRWNQQ?editors=1010

我测试了它

• Chrome 108.0.5359.99（正式版）（64 位）
• Firefox 107.0.1（64 位

您应该检查https://caniuse.com/?search=datalist以获取有关浏览器支持的更多详细信息。

 input.onfocus = function () { browsers.style.display = 'block'; input.style.borderRadius = "5px 5px 0 0"; }; for (let option of browsers.options) { option.onclick = function () { input.value = option.value; browsers.style.display = 'none'; input.style.borderRadius = "5px"; } }; input.oninput = function() { currentFocus = -1; var text = input.value.toUpperCase(); for (let option of browsers.options) { if(option.value.toUpperCase().indexOf(text) > -1){ option.style.display = "block"; }else{ option.style.display = "none"; } }; } var currentFocus = -1; input.onkeydown = function(e) { if(e.keyCode == 40){ currentFocus++ addActive(browsers.options); } else if(e.keyCode == 38){ currentFocus-- addActive(browsers.options); } else if(e.keyCode == 13){ e.preventDefault(); if (currentFocus > -1) { /*and simulate a click on the "active" item:*/ if (browsers.options) browsers.options[currentFocus].click(); } } } function addActive(x) { if (;x) return false; removeActive(x). if (currentFocus >= x;length) currentFocus = 0. if (currentFocus < 0) currentFocus = (x;length - 1). x[currentFocus].classList;add("active"); } function removeActive(x) { for (var i = 0. i < x;length. i++) { x[i].classList;remove("active"); } }

 fieldset { border: 1px solid blue; width: 360px; border-radius: 5px; } legend, label{ color: blue; font-size: 24px; font-family: sans-serif; } input { font-size: 18px; padding: 5px; height: 35px; width: 350px; border: 1px solid blue; outline: none; border-radius: 5px; color: blue; /* border-bottom: none; */ } datalist { position: absolute; background-color: white; border: 1px solid blue; border-radius: 0 0 5px 5px; border-top: none; font-family: sans-serif; width: 350px; padding: 5px; max-height: 10rem; overflow-y: auto } option { background-color: white; padding: 4px; color: blue; margin-bottom: 1px; font-size: 18px; cursor: pointer; } option:hover, .active{ background-color: lightblue; }

 <fieldset> <legend> Datalist Form </legend> <label>Select Browser</label> <input autocomplete="off" role="combobox" list="" id="input" name="browsers" placeholder="Select your fav browser"> <!-- Its important that you keep list attribute empty to hide the default dropdown icon and the browser's default datalist --> <datalist id="browsers" role="listbox"> <option value="Internet Explorer">Internet Explorer</option> <option value="Chrome">Chrome</option> <option value="Safari">Safari</option> <option value="Microsoft Edge">Microsoft Edge</option> <option value="Firefox">Firefox</option><option value="Microsoft Edge">Microsoft Edge</option> <option value="Firefox">Firefox</option><option value="Microsoft Edge">Microsoft Edge</option> <option value="Firefox">Firefox</option><option value="Microsoft Edge">Microsoft Edge</option> <option value="Firefox">Firefox</option><option value="Microsoft Edge">Microsoft Edge</option> <option value="Firefox">Firefox</option><option value="Microsoft Edge">Microsoft Edge</option> <option value="Firefox">Firefox</option><option value="Microsoft Edge">Microsoft Edge</option> <option value="Firefox">Firefox</option><option value="Microsoft Edge">Microsoft Edge</option> <option value="Firefox">Firefox</option><option value="Microsoft Edge">Microsoft Edge</option> <option value="Firefox">Firefox</option><option value="Microsoft Edge">Microsoft Edge</option> <option value="Firefox">Firefox</option> </datalist> <!-- <br> <br> <label for="pwd"> Password </label> <input id="pwd" type="password"> --> </fieldset>

Answer 4

编辑：
在查看了其他几个库之后，我发现react-datalist-input提供了与数据列表交互的最简单方法，包括 react、样式和功能。

您可以通过以下方式访问样式

.datalist-input  

下面是一个简单的代码片段：

const DataListWrapper = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 6px;

    .datalist-input {
        width: 50%;
        color: black;
    }
`;

const SomeComponent = () => {
    return (
        <DataListWrapper>
            <ReactDataList
                forcePoly
                placeholder="Search Something..."
                list="my_list"
                options={options}
                onOptionSelected={(e) => foo(e)}
            />
        </DataListWrapper>
    );
};

老答案：
（注意： react-datalist没有得到维护，它的一些依赖项已被弃用）

使用 react 时，您可以使用以下方式设置选项和数据列表本身的样式

react-datalist

https://www.npmjs.com/package/react-datalist

您可以使用 CSS 或 styled-components 访问这些

.react-datalist  
.react-datalist-option

这是一个使用样式组件的简单代码片段：

    const DataListWrapper = styled.div`
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 6px;
    
          .datalist-input {
              width: 50%;
              color: black;
          }
    `;
    
    const SomeComponent = () => {
        return (
            <>
                <DataListWrapper>
                    <DataListInput
                        placeholder="Search Something..."
                        items={items}
                        onSelect={DoSomething}
                    />
                </DataListWrapper>
            </>
        );
    };

Answer 5

您可以使用 Jquery 创建替代 Datalist

 $(document).on('dblclick', 'input[list]', function(event){ event.preventDefault(); var str = $(this).val(); $('div[list='+$(this).attr('list')+'] span').each(function(k, obj){ if($(this).html().toLowerCase().indexOf(str.toLowerCase()) < 0){ $(this).hide(); } }) $('div[list='+$(this).attr('list')+']').toggle(100); $(this).focus(); }) $(document).on('blur', 'input[list]', function(event){ event.preventDefault(); var list = $(this).attr('list'); setTimeout(function(){ $('div[list='+list+']').hide(100); }, 100); }) $(document).on('click', 'div[list] span', function(event){ event.preventDefault(); var list = $(this).parent().attr('list'); var item = $(this).html(); $('input[list='+list+']').val(item); $('div[list='+list+']').hide(100); }) $(document).on('keyup', 'input[list]', function(event){ event.preventDefault(); var list = $(this).attr('list'); var divList = $('div[list='+$(this).attr('list')+']'); if(event.which == 27){ // esc $(divList).hide(200); $(this).focus(); } else if(event.which == 13){ // enter if($('div[list='+list+'] span:visible').length == 1){ var str = $('div[list='+list+'] span:visible').html(); $('input[list='+list+']').val(str); $('div[list='+list+']').hide(100); } } else if(event.which == 9){ // tab $('div[list]').hide(); } else { $('div[list='+list+']').show(100); var str = $(this).val(); $('div[list='+$(this).attr('list')+'] span').each(function(){ if($(this).html().toLowerCase().indexOf(str.toLowerCase()) < 0){ $(this).hide(200); } else { $(this).show(200); } }) } })

 * { scrollbar-width: thin; scrollbar-color: #BBB #EEE; } *::-webkit-scrollbar { width: 10px; } *::-webkit-scrollbar-track { background: #C0C3C6; } *::-webkit-scrollbar-thumb { background-color: #888; border-radius: 10px; border: 3px solid #C0C3C6; } table { width: 400px; margin: 0 auto; background: #EEE; font-family: Arial; padding: 10px 30px; border-radius: 5px; box-shadow: 0 5px 5px -5px #000; --border: 1px solid #ABC; } table td { padding-bottom: 10px; } table h4 { text-align: center; color: #567; border: 1px solid #567; border-radius: 3px; padding: 15px 0; } input { padding: 10px; font-size: 1em; width: calc(100% - 20px); border: var(--border); border-radius: 3px; } input[list]:focus { outline: none; } input[list] + div[list] { display: none; position: absolute; width: 100%; max-height: 164px; overflow-y: auto; max-width: 330px; background: #FFF; border: var(--border); border-top: none; border-radius: 0 0 5px 5px; box-shadow: 0 3px 3px -3px #333; z-index: 100; } input[list] + div[list] span { display: block; padding: 7px 5px 7px 20px; color: #069; text-decoration: none; cursor: pointer; } input[list] + div[list] span:not(:last-child) { border-bottom: 1px solid #EEE; } input[list] + div[list] span:hover { background: rgba(100, 120, 140, .2); } table .instructions { font-size: .9em; color: #900; } table .instructions b { color: #123; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table width="400"> <tr> <td> <h4>DATALIST STYLING ALTERNATIVE</h4> </td> </tr> <tr> <td> <div>Programming languages</div> <input type="text" name="language" list="list-language"> <div list="list-language"> <span>CSharp</span> <span>Delphi</span> <span>Flutter</span> <span>Java</span> <span>Java Script</span> <span>PHP</span> <span>Python</span> <span>Ruby</span> <span>SAP</span> <span>Visual Basic</span> </div> </td> </tr> <tr> <td> <div>Cities</div> <input type="text" name="cities" list="list-cities"> <div list="list-cities"> <span>Athens</span> <span>Beijing</span> <span>Berlin</span> <span>Cairo</span> <span>Lisbon</span> <span>London</span> <span>Mexico City</span> <span>Moscow</span> <span>New York</span> <span>Rio de Janeiro</span> <span>Rome</span> <span>Tokyo</span> </div> </td> </tr> <tr> <td> <div class='instructions'> <b>INSTRUCTIONS:</b><hr> <p><b>Double click on the input:</b><br>Show/hide the datalist.</p> <p><b>Press esc on the input:</b><br>Hides datalist if visible.</p> <p><b>Onkeypress in the input:</b><br>Displays the datalist filtering according to the entered string.</p> <p><b>On pressing enter:</b><br>Ff there is only 1 element in the datalist, this value will be loaded into the input.</p> </div> <td> </tr> </table>

Answer 6

尝试：

input[list]
{
  background: red;
}