当突出显示选项时，HTML5选择标记设置为透明和不同颜色答案

【问题标题】：html5 select tag set to transparent and different color when option is highlighted当突出显示选项时，HTML5选择标记设置为透明和不同颜色
【发布时间】：2012-05-22 20:45:53
【问题描述】：

我们有以下代码，它是一个 html5 选择下拉菜单：

    <!doctype html>
    <select name="indexCombobox1">
    <option selected value="null">    Sort By:</option>
    <option value="most_recent">    Most Recent</option>
    <option value="most_popular">    Most Popular</option>
    <option value="featured">    Featured</option>
    </select>

是否有数据属性可以设置下拉背景透明，以便您可以看到下拉菜单背后的内容？是否有一个数据属性可以将选项高亮从默认蓝色更改为不同的颜色，例如黄色？

【问题讨论】：

标签： html select

【解决方案1】：

CSS(3) 应该可以解决问题。比如：

option:hover {
background-color: rgba(0, 0, 0, .2);
}

编辑：用 jquery 代替 css：

$('option').hover(function() {
     $(this).css(backgroundColor: 'rgba(0, 0, 0, .2)');
}, function(){
    $(this).css(backgroundColor: 'blue'); //or something else you consider 'normal'
});

【讨论】：

选项：hover 是否可以内联完成，例如
不，您需要选择器。但是你可以使用，虽然我不推荐它，onmouseover 事件并在那里调用一个 js 函数来调整 css。
如果我需要选择器，那么我将不得不使用 jquery。如果是这样，那么调用选择器的语法是什么？我假设我可以通过在选择标记中使用类属性来调用 jquery 函数。 fwiw，我希望 html5 能将其简化，这样就不需要 ajax/css 来处理透明背景。相反，它就像简单地设置数据属性一样简单，例如

【解决方案2】：

我越来越多地使用jqtransform library 来为移动网络应用程序和 HTML 网站设置表单元素的样式。

我无法确认它是否能让你使背景透明，但它几乎可以做任何其他事情来形成元素。

【讨论】：