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

Posted 2023-02-23

【中文标题】有没有办法在 HTML5 数据列表选项上应用 CSS 样式？

【英文标题】：Is there a way to apply a CSS style on HTML5 datalist options?

【发布时间】：2012-11-21 12:32:46

【问题描述】：

我想修改数据列表中不同选项列表的显示方式。是否可以在其上应用一些 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;

但它似乎不起作用。

【问题讨论】：

Is it possible to style the drop-down suggestions when using html5 datalist?的可能重复

【参考方案1】：

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

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

【讨论】：

相关：Firefox 供应商特定的 CSS 扩展列表（包括例如占位符，但与 datalist 类似）：developer.mozilla.org/en-US/docs/Web/CSS/Reference/…

我希望有一种方法可以一致地改变原生元素的样式，例如数据列表和选择

【参考方案2】：

您可以使用 Jquery 创建替代数据列表

$(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 >
    <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>

【讨论】：

你为什么使用基于表格的布局？

最初的问题是如何应用样式而不是替代方案。

【参考方案3】：

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

您可以通过

访问样式

.datalist-input  

下面是一个简单的代码sn-p：

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

这是一个使用 styled-components 的简单代码 sn-p：

    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>
            </>
        );
    ;

【参考方案4】：

尝试：

input[list]

  background: red;

【讨论】：

在 Firefox 30 中，input[list] 设置文本框的样式，而不是列表的样式。在 IE 11 中，它设置了文本框 和 列表的样式。

这对改变数据列表的背景颜色不起作用，但可以用于改变输入的背景颜色