相关疑难解决方法(0)

我有一个select盒子,我试图select在单击该框时更改选项的背景颜色并显示所有选项.

见小提琴

HTML:

<select>
    <option val="">Please choose</option>
    <option val="1">Option 1</option>
    <option val="2">Option 2</option>
    <option val="3">Option 3</option>
    <option val="4">Option 4</option>
</select>

CSS:

select{
    margin:40px;
    background: rgba(0,0,0,0.3);
    color:#fff;
    text-shadow:0 1px 0 rgba(0,0,0,0.4);
}

在右上角的http://jqueryui.com/demos/accordion/上,您可以看到默认情况下显示"主题:UI亮度"的下拉列表.

我想在我的Web应用程序中创建这样一个交互元素.有没有人知道一个好的jquery插件可以轻松做到这一点？

我有一个列出字体系列的下拉列表.像Tahoma,Arial,Verdana等.我想根据它代表的值更改每个下拉项的font-family.就像Photoshop一样.

我为每个下拉项更改了CSS,但它只适用于FireFox.它不适用于任何其他浏览器.

我不想使用任何jQuery插件.

可能重复:在Internet Explorer中以粗体显示
选择标记中的单独选项更改css字体系列

我无法在IE8,9中设置HTML select下拉列表的font-family.这是一个错误/财产还是我做错了什么？字体大小设置有效.这个例子太极端我真正的问题是我在页面和列表中有不同的字体.
我不关心IE7-.

示例(http://jsfiddle.net/SDcLX/11/):

我有以下HTML:

aaaaa
<div class="container">
skjhlks <select>
    <option class="courier">courier</option>
    <option>aa</option>
    <option style="font-family:impact;" selected="selected"  >bb</option>
</select>
</div>

和CSS

.container
  {
    font-size:30px;
    font-family:Lucida Handwriting;
   }
select
{
    font-family:inherit;
    font-size:inherit;
}

option.courier
 {
    font-family:courier;
 }

FF的结果是:

在IE中: