相关疑难解决方法(0)

这是我的HTML:

<select id="ddlProducts" name="ddProducts"> 
    <option>Product1 : Electronics </option>
    <option>Product2 : Sports </option>
</select>

现在,我想要的是将产品的名称(即'Product1','Product2'等)加粗,并使用css将其类别(即电子,运动等)斜体化.我发现了一个关于一岁的类似问题,但正如那里提到的那样,使用HTML和CSS是不可能的.希望现在有一个解决方案.任何提示,怪癖或技巧将不胜感激.谢谢.

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

但它似乎没有用.

我正在尝试即时创建一个数据列表并将其附加到现有的输入元素。但是什么也没有发生（没有显示下拉箭头）jQuery 也是可以接受的。

var optionList = ["Seattle", "Las Vegas", "New York", "Salt lake City"];

function fillDataList() {
    var container = document.getElementById('my-text-box'),
    i = 0,
    len = optionList.length,
    dl = document.createElement('datalist');

    dl.id = 'dlCities';
    for (; i < len; i += 1) {
        var option = document.createElement('option');
        option.value = optionList[i];
        dl.appendChild(option);
    }
    container.appendChild(dl);
}

小提琴：https : //jsfiddle.net/tomsx/704cxako/

（取自本网站的示例：http : //blogs.microsoft.co.il/gilf/2012/07/30/quick-tip-autocomplete-using-html5-datalist-element/）