如何设置选择标签的选项元素的样式?

2024-03-15

我正在尝试设置一个的风格option in a selectGoogle Chrome 中的下拉菜单。它适用于除 IE9 和 Chrome 之外的所有浏览器。

option.red {
    background-color: #cc0000; 
    font-weight: bold; 
    font-size: 12px; 
    color: white;
}
<select name="color">
    <option class="red" value="red">Red</option>
    <option value="white">White</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
</select>

在不使用 JavaScript 的情况下,有没有办法为 Google Chrome 中的选项设置样式?一旦选择,背景颜色就不会显示。


不幸的是,WebKit 浏览器不支持以下样式<option>标签还没有,除了color and background-color.

最广泛使用的跨浏览器解决方案是使用<ul> / <li>并使用 CSS 设置它们的样式。像这样的框架引导程序 http://twitter.github.io/bootstrap/做好这件事。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何设置选择标签的选项元素的样式? 的相关文章

  • CSS变量名可以以数字开头吗?

    我想知道定义一个以这样的数字开头的 css 变量是否有效 root 1space 32px 这在 Chrome 上工作得很好 但是该代码没有经过验证https jigsaw w3 org css validator https jigsaw
  • AngularJS:ng-show 与 display:none

    我有一个用例 我必须使用 CSS 默认隐藏 HTML 元素 如下所示 HTML div class item div CSS item display none 但是 我需要在页面加载后使用 ng show 切换元素的可见性 如下所示 di
  • HTML 嵌入对象具有灰色背景。可以透明吗?

    我使用带有开源插件的 Firefox 来播放视频 视频被 尽可能好地 缩放以适应嵌入对象的宽度和高度中定义的可用空间 但有时右侧和 或底部会有一点灰色边框 看来这不是我的父 div 的背景颜色 因为更改它根本没有效果 这是 HTML div
  • CSS - 为什么我无法设置 元素的高度和宽度?

    我正在尝试使用以下 html 标记创建 css 按钮 a href access php class css button red Forgot password a 但它最终不会比中间的文本大 即使我已经设置了班级的高度和宽度 顺便说一句
  • 使用 GD lib 过滤器标准化 CSS 过滤器

    我想让用户拖动范围滑块并通过实时预览 CSS 滤镜 调整图像的亮度和对比度 然后使用 GD 库保存调整 但是 我似乎无法从 CSS 过滤器和 GD lib 亮度和对比度过滤器获得相同的结果 我的 CSS 过滤器范围为 50 150 其中 1
  • 如何使用 Bourbon Neat Framework 实现移动优先

    我一直在使用 bourbon clean 来进行桌面优先布局 效果很好 不过 我想做一个移动优先版本 从移动开始 然后逐步向上 默认网格为 12 列 对于移动设备 我通常使用 4 列网格 我尝试将网格更改为 4 列 然后扩展到 12 列 但
  • 使 css nth-child() 只影响可见

    有没有办法用这个CSS只影响可见元素 table grid tr alt nth child odd background ebeff4 table grid tr alt nth child even background ffffff
  • 我的整个 Rails 应用程序仅从一个文件获取 css 为什么

    我为两个控制器添加了不同的 css 文件 但我的整个应用程序仅从product css 我为两个控制器添加了不同的 css 文件 但我的整个应用程序仅从product css我为两个控制器添加了不同的 css 文件 但我的整个应用程序仅从p
  • 粘表行

    我正在尝试实现一个像 iOS 那样的日历列表视图 基本上 我现在正在做的就是循环遍历我的事件数组 如果是新日期 则打印日期标题 否则打印日历事件 我想让日期标题行保持粘性 直到它们 滚动走 我怎样才能做到这一点 我看到很多关于粘性标题的示例
  • 如何在 Mac 的任何 webkit 中隐藏父圆角的画布内容?

    我有一个父母div带有圆角 其中包含canvas div div
  • 如何在css3中制作曲线风格的菜单?

    是否可以用css3制作曲线 圆弧样式的菜单 我可以使用canvas或HTML5中的其他东西来实现这一点吗 预先感谢 洛根 不幸的是 我不知道有什么优雅的解决方案 特别是当涉及到菜单项时 但弧线本身应该可以在纯 css 和几个 html 元素
  • Swift - 将图像插入 PDF 不再适用于 iOS 13

    目前正在开发在我的贷款计算器应用程序上导出 PDF 的功能 我有一个预览屏幕 可以在您保存 PDF 之前显示它 预览屏幕由带有 html 的 webView 组成 其中包含占位符 我能够成功地将图像插入到正确的占位符上 并将其显示在 PDF
  • IE8 中空 div 层的 z-index 问题

    我在 IE8 中遇到 z index 问题 其他尚未测试 以下 JS 创建一些 html css document write img src border 0 document write div style background col
  • 我可以在不同浏览器中获得一致的 CSS 颜色吗?

    我正在测试一个新网站 并且我有一个 div background color bbf6bb 这对我来说似乎无害 然而 在我的 MacBook Pro 上 Firefox 3 6 与 Safari 4 中的颜色看起来非常不同 在 Safari
  • @font-face 字体在 Mac 的 Safari 和 Chrome 中显示模糊

    I m using two special fonts on my website for headings and subtitles They are working fine on a PC in IE Firefox and Chr
  • Firefox CSS 大纲错误?

    在 Chrome 和 IE9 上 我指定的 CSS 轮廓完全符合我的要求 并充当我正在设计的元素周围的第二个边框 但在 Firefox 上 轮廓会向外扩展 以便包含我生成的 after 伪元素以及主元素 这是一个错误 还是预期的 有什么好的
  • 如何在不设置动画的情况下突然更改 CSS 动画中的属性

    这是我试图弄清楚的 但没有使用 51 关键帧作为实现更改的黑客方法transform origin 这里有一个小提琴演示 http jsfiddle net p7pswnpq keyframes spin 0 transform origi
  • 浏览器显示“已阻止摄像头以保护您的隐私”

    浏览器说 阻止摄像头以保护您的隐私 我的项目包括使用用户摄像头 当我从本地主机访问应用程序时 摄像头工作正常 但是当通过 IP 地址访问时 浏览器默认阻止摄像头和其他资源 我如何允许它们用于我的应用程序 我的应用程序适用于将使用 IP 地址
  • 响应式2列2行布局

    我一直在试图弄清楚如何创建这个布局 我有一个 2 列布局 左列有 1 行 右侧有 2 行 我试图让它流畅地调整 我遇到的问题是 我希望右侧顶部图像的顶部与左侧图像的顶部对齐 而底部图像的底部与左侧图像的底部保持对齐 我应该使用桌子吗 这是我
  • 在桌面和移动设备上编写 2 列和 3 列的 Flexbox 代码(换行)

    我真的很难弄清楚这个 CSS flexbox 解决方案 基本上有两个问题 一个是 2 列布局 另一个是 3 列布局 2 列 我认为这可能非常简单 3 列 这可能更高级一些 容器类是 嗯 container 而孩子们只是 left right

随机推荐

  • 在 C++ 中从 EnumWindows 生成的过滤/解析列表

    我正在使用以下代码来获取我的计算机上运行的窗口列表 include
  • 有用(困难)的 SQL 脚本库 [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 如何定义 MKAnnotationView 重叠的顺序?

    我的地图中有几个 MKAnnotations 及其相应的视图 有时会变得非常拥挤 现在 我的应用程序中的注释有两种风格 有些必然会保留在原处 而另一些则会随着时间的推移而移动 我更喜欢让视觉上更稳定的物体出现在背景中 而移动的物体总是在它们
  • 在 C# 中确定会话变量为 null 或空的最佳方法是什么?

    检查 ASP NET C 中会话变量是否存在的最佳方法是什么 我喜欢用String IsNullOrEmpty 适用于字符串 想知道是否有类似的方法Session 目前我知道的唯一方法是 var session if Session var
  • Finder 窗口刷新问题(Yosemite)

    我正在开发 Finder Sync 扩展以在文件和文件夹上应用徽章 我想刷新 Finder 应用程序中特定文件 文件夹的图标 有没有办法在 mac OS Yosemite 上以编程方式刷新查找器窗口 除了创建和删除文件 我也有这个问题 我曾
  • 用pointfree风格写f?

    说我有功能 g a gt b h a gt c and f b gt c gt d 函数可以写吗 f a gt a gt d 给出的 f x y f g x h y 点自由风格 可以写一个函数 f a gt d f x f g x h x
  • imul 指令的 ZF 行为是什么? [复制]

    这个问题在这里已经有答案了 指令集参考指出 imul 指令的 ZF 未定义 那么 如果我将寄存器中的值乘以立即数 0x0 ZF 会发生什么情况 未定义意味着结果可以是任何值 并且任何值都不重要
  • 使用 Tortoise SVN 通过 VPN 进行 SVN+SSH 结账,Smartsvn 失败

    系统和连接详细信息 我使用的是运行 Windows 7 的 64 位系统 我安装了 Open VPN 和 Tortoise SVN 64 位 该存储库位于远程系统中 我们使用 VPN 进行连接 到目前为止我做了什么 我已按照必要的步骤启动
  • Firestore 将值添加到数组字段

    我尝试使用 Firebase 云函数将聊天室的 id 添加到数组字段中的用户文档中 我似乎无法弄清楚写入数组字段类型的方法 这是我的云函数 exports updateMessages functions firestore documen
  • 仅返回 LEFT JOIN 的最新结果[重复]

    这个问题在这里已经有答案了 我正在查询两个表 students2014 和notes2014 中的数据 以便返回学生列表以及每个学生的注释 为此 我使用以下 select 语句 SELECT FROM students2014 LEFT J
  • Qt vtable错误

    我正在浏览旧的 Trolltech Qt 教程 因为我发现它们比新的教程更有帮助 并且undefined reference to vtable当我到达一个实现它自己的信号的类小部件时 我遇到了错误 http doc trolltech c
  • jquery 如何删除第一个 x div 的?

    如果我单击按钮 我会尝试删除前 4 个 div div class test div class 1 div div class 1 div div class 1 div div class 1 div div class 1 div d
  • 在 tkinter 上清除并绘制 matplotlib 图形

    我当前的代码需要一些帮助 我想通过 tkinter 创建一个窗口 并在我之前通过 matplotlib 创建的画布中显示一个绘图 这一点我还没有达到 我的问题是我想通过点击按钮来清除画布 为了清除画布 我想先初始化它 然后才能用绘图填充它
  • 具有通用返回类型但不具有通用输入的方法。这可能吗?

    假设我们有一个NodeData class public class NodeData
  • Facebook 图形 API 响应大小限制(错误代码 1)

    只是分享我在测试我的应用程序时遇到的一些信息 Facebook Graph API 实现了速率限制 如其上所述文档页 https developers facebook com docs graph api advanced rate li
  • 在 C# 中解析 html 的最佳方法是什么? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 将绘图添加到 matplotlib 中的给定图形

    我在代码的一部分中创建了一个图形 如下所示 n arange 51 fig3 plt figure plt semilogy n a1mag ro 现在 我想在代码的后面部分向该图添加另一个绘图 有没有办法在绘图时访问Fig3 建议完全保留
  • 将文件上传到 Dropbox 中的特定文件夹

    我使用此示例将文件上传到保管箱 https github com geersch DropboxRESTApi blob master src part 5 README md https github com geersch Dropbo
  • 使用 sha256WithRSAEncryption 进行签名需要什么版本的 OpenSSL

    使用 PHP 5 2 4 和 OpenSSL 0 9 8g 模块我试图创建一个签名摘要 openssl sign stuff signeddigest key sha256WithRSAEncryption 唉 signeddigest 返
  • 如何设置选择标签的选项元素的样式?

    我正在尝试设置一个的风格option in a selectGoogle Chrome 中的下拉菜单 它适用于除 IE9 和 Chrome 之外的所有浏览器 option red background color cc0000 font w