html - 如何使用 HTML 5 和 CSS 3 显示彩色下拉选择器?

标签 html css

我有一个基本的 html 选择:

<select>
    <option value="1">Apple</option>
    <option value="2">Banana</option>
    <option value="3">Grape</option>
</option>

我想将每个选项的背景颜色设置为不同的颜色。例如,苹果是红色的,香蕉是黄色的,葡萄是紫色的。通过启动下拉菜单,我会在每个选项中看到不同的颜色。

是否可以在最新的 FirefoxWebkit(Chrome 和 Safari)浏览器上使用 CSS3/HTML5 实现上述目标?

注意:您能否在最新的 Firefox 和 Chrome 上(可能在 Mac 上)测试您的解决方案?我知道背景颜色方法,但它只适用于 Mac 上的 Firefox。

最佳答案

是不是就这么简单? http://jsfiddle.net/d8p8Q/

<select>
    <option value="1" style="background:red">Apple</option>
    <option value="2" style="background:yellow">Banana</option>
    <option value="3" style="background:purple">Grape</option>
</select>

我是不是漏掉了什么?

Safari Chrome (我使用的是 Windows 7)

“葡萄”是蓝色的,因为那是我悬停的那个。我认为不可能使用 native <select> 更改蓝色“选定”颜色元素。

如果这就是您要执行的操作,则必须换出 <select> s 替换为 JavaScript,例如:

http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

关于html - 如何使用 HTML 5 和 CSS 3 显示彩色下拉选择器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6311722/

相关文章:

css - SCSS 语法定义 @include font(400,16pt);

html - 浏览器是否有正文/文档的最大高度?

html - 使用 Bootstrap 类设置字体粗细

html - Chrome 和 Firefox 中的 'div' 高度不同

javascript - polymer - 在元素中加载核心 ajax

javascript - 动态排列 md-dialog 标签

javascript - 有没有一种方法可以让网站确定它是否正在 iPad 上查看以及是否正在使用 iPhone/Android/Pre 查看

javascript - 在 sibling 之后添加新段落

html - 尝试媒体查询但无法使它们工作

html - CSS - 图像没有出现在 div 的背景上