如何将CSS应用于下拉项

将CSS应用于下拉项可以通过以下几种方式实现：

内联样式：在HTML标签的style属性中直接定义CSS样式。例如：

<select>
  <option style="color: red; background-color: yellow;">选项1</option>
  <option style="color: blue; background-color: green;">选项2</option>
</select>

这种方式适用于只有少量下拉项需要样式的情况。

内部样式表：在HTML文档的<head>标签内使用<style>标签定义CSS样式。例如：

<head>
  <style>
    select option {
      color: red;
      background-color: yellow;
    }
  </style>
</head>
<body>
  <select>
    <option>选项1</option>
    <option>选项2</option>
  </select>
</body>

这种方式适用于多个下拉项需要相同样式的情况。

外部样式表：将CSS样式定义在独立的外部CSS文件中，并在HTML文档中引用该文件。例如：在名为style.css的外部CSS文件中定义样式：

select option {
  color: red;
  background-color: yellow;
}

在HTML文档中引用该外部CSS文件：

<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <select>
    <option>选项1</option>
    <option>选项2</option>
  </select>
</body>

这种方式适用于多个页面需要共享相同样式的情况。

无论使用哪种方式，都可以通过CSS选择器来选择下拉项，并为其应用相应的样式。在上述示例中，使用了"select option"选择器来选择所有下拉项，并为其设置了颜色和背景颜色。

腾讯云相关产品和产品介绍链接地址：

腾讯云CSS CDN：https://cloud.tencent.com/product/css-cdn
腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
腾讯云云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
腾讯云内容分发网络（CDN）：https://cloud.tencent.com/product/cdn
腾讯云云安全中心：https://cloud.tencent.com/product/ssc
腾讯云云点播（VOD）：https://cloud.tencent.com/product/vod
腾讯云人工智能：https://cloud.tencent.com/product/ai
腾讯云物联网通信（IoT Hub）：https://cloud.tencent.com/product/iothub
腾讯云移动推送（TPNS）：https://cloud.tencent.com/product/tpns
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
腾讯云腾讯会议：https://cloud.tencent.com/product/tc-meeting
腾讯云腾讯会议室：https://cloud.tencent.com/product/tc-room

页面内容是否对你有帮助？

有帮助

没帮助

如何将CSS应用于下拉项

、

我想为下拉列表中的每个项目添加一个圆形符号。圆形符号的颜色取决于条件；如果激活===1，则符号应显示为绿色，否则显示为红色。}>●</span>{item.GRPName}</span></option>)} </select> 这是我的代码，符号正在显示，但我应用的CSS不起作用，而且当我们从下拉菜单中选择一个项目时，符号也会显示，我也不需要它。

浏览 15提问于2019-12-10得票数 0

3回答

如何在div元素中对类应用条件

、

如何将CSS类条件应用于下面的div元素 <div Class="{toolsMenuWidthSet==true?'dropdown-custom-width-links-2'}" aria-labelledby="dropdownMenuButton" id="appsDropdownPopup"> 如果toolsMenuWidthSet是真的，那么应用“下拉菜单下拉-

浏览 6提问于2020-01-29得票数 0

回答已采纳

1回答

如何设置DropdownList的第一个元素文本居中，并保持其余的左对齐？

、、

我有一个asp下拉列表，我有“选择选项”作为下拉列表中的第一个元素。下拉列表中的所有元素(包括第一个)将自动左对齐。如果我将文本对齐设置为居中，所有列表项都会对齐到居中，这是我不想要的。

浏览 21提问于2012-08-02得票数 1

1回答

如何在Vue中对列表中的一个项目按下鼠标/悬停？

当我鼠标移动时，css类hovering将应用于所有项，而不仅仅是一个项。如何将其修正为css类hovering，以便仅应用于我鼠标控制的项？

浏览 2提问于2020-12-18得票数 3

回答已采纳

1回答

Drupal7.x:如何将样式应用于节点中的RSS提要？

、、、

如何将CSS样式应用于节点中的RSS提要项？在Drupal7.x中，我使用Feeds模块导入RSS提要并创建新闻条目节点。我想应用一些CSS样式来显示提要项，减少新闻容器的宽度，并在新闻项周围添加边框。可以将样式应用于节点中的RSS提要项吗？

浏览 3提问于2012-08-24得票数 0

回答已采纳

1回答

在浏览HTML选择元素的下拉菜单时保留悬停样式

、、、、

我有一个HTML select项，当您悬停在它上时，它会改变样式。然而，在Windows上的Chrome中，当您浏览select下拉菜单并离开原始位置时，这种效果就会停止。如何使选择下拉菜单在用户导航时继续触发悬停？看起来对li下拉菜单很有帮助，但我不知道如何将它应用于select元素。

浏览 4提问于2014-04-14得票数 0

回答已采纳

1回答

从服务器刷新，并且只更新新元素

、、、

我每隔几秒钟刷新一次服务器上的数据。一切都运行得很好，但是有一段时间，数据将加倍，而先前的数据将以角度显示，而下一个数据将被添加进来。这一点在ng动画中尤为明显，因为每个元素都是动画化的，然后再进入。 return { fetchModels: function () { $http.get("/models").success(fu

浏览 8提问于2014-07-14得票数 2

回答已采纳

5回答

如何在IE8和IE9中隐藏下拉箭头？

、、、

我使用下面的CSS在FF，safari，chrome中隐藏下拉箭头，并添加了我自己的图像进行自定义。-o-appearance:none;}select::-ms-expand{} 我不知道如何将同样的方法应用于谁能告诉我如何在IE8 & IE9中隐藏下拉箭头。

浏览 0提问于2013-10-16得票数 44

2回答

显示部分文本的下拉列表

、

我在IE9中的下拉列表显示了部分文本。例如，有一个名为"Hello World“的选项。但当我选择它时，它会显示"Hello“。我尝试禁用css，我发现是这个css导致了问题。我不能更改核心css文件，因为它可能会影响其他部分。有什么好的建议我可以修改一下吗？谢谢。

浏览 7提问于2012-04-26得票数 0

回答已采纳

1回答

如何更改Vaadin-选择悬停颜色

/styles/vaadin-select-items.css", themeFor = "vaadin-item") 然而，有一个问题发生了，当下拉菜单关闭时，悬停颜色出现了悬停在覆盖项上的颜色另外，像这样的应用主题也适用于所有覆盖项，如何将这些样式唯一地应用于某些组件。

浏览 1提问于2021-06-30得票数 4

2回答

Wordpress list_pages设置li属性和一个下拉菜单

> 但是，如何将鼠标悬停属性分配给创建的<li>？此外，如果有子页面，则它们需要在嵌套的<ul>中，并在父页面悬停时显示为下拉列表。

浏览 1提问于2010-11-03得票数 0

回答已采纳

4回答

如何将css样式应用于突出显示的文本？就像在MSWord中突出显示，然后单击粗体

我正在创建一个具有css样式(粗体，斜体，改变单词的颜色等)的下拉菜单的图形用户界面。我遇到的问题是，当我应用这些样式时，它适用于整个段落，而不是单个单词。我只想将span应用于突出显示的部分。多么?</p>这是我所知道的应用span的唯一方法，但我想了解如何将其应用于用户突出显示的内容。有没有代码可以检测高亮显示的用户？编辑:目标是突出显示，将css样式应用于突出显示的内容，删除突出显示，样式仍然存

浏览 0提问于2018-11-01得票数 3

1回答

默认ckeditor配置中缺少字体标签

、、、、

，如果我手动更改它，它就可以工作了，但当我在CKEditor窗口外单击，然后再次在里面单击时，它会返回到初始状态，没有标记，请看：我在谷歌上尝试了所有的解决方案，比如添加 content.css

浏览 1提问于2015-05-26得票数 1

1回答

如何用select2代替自举选择？

、、、、

我已经在整个应用程序中使用了bootstrap-select。现在我应该用相同样式的select2替换bootstrap-select。更改js部件的最快、最有效的方法是什么？在bootstrap-select中有方法和选项，如selectpicker('refresh'),selectpicker('show'),selectpicker('c‌lose')等，而在select2中，方法是open,close等。即使我用不太相似的bootstrap-select方法替换那些select2方法，我也得不到相同的结果和奇怪的行为。与bo

浏览 1提问于2017-05-08得票数 2

1回答

如何使下拉菜单项的宽度与内容的宽度完全相同？

、、、、

当我检查下拉菜单时，我看到的是： tabindex="-1" aria-hidden="false"class="dropdown-item" A </div> 这些是相关的CSS

浏览 5提问于2022-06-06得票数 1

回答已采纳

1回答

Select2:如何向集装箱应用边距？容器没有唯一的ID

当我将Select2应用到下拉列表时，它会添加一堆标记，包括外部容器： select2-container--defaultselect2-container--below select2-container--open" dir="ltr"> 我需要对这个容器应用CSS样式，但只适用于这个下拉列表(而不是其他的Select2但是，当我原来的下拉列表中没有身份证的时候，怎么做呢？我可以在

浏览 2提问于2017-12-09得票数 4

3回答

使用jQuery更改背景颜色

、、

我有一个有多个下拉菜单的表单...当可见下拉菜单被禁用时，我想将其背景颜色设置为灰色。所有这些下拉列表的id都以usrControl开头。这就是我目前所掌握的..$('select[id ^= "usrControl"]:visible').each(function(){});

浏览 0提问于2010-12-21得票数 2

回答已采纳

2回答

将CSS类添加到select not working in FF5的一个选项中

、、

COMMISSIONS AND BONUS PAY</option></select> text-transform: none; 我的问题是，这在IE8中按预期工作，但在FF5中，添加css在Firebug中，我可以看到类已被选中并<

浏览 0提问于2011-07-29得票数 2

回答已采纳

2回答

在下拉列表中使用:a选项元素

、

当下拉列表关闭时，我试图使用css将所选选项添加到下拉列表中。具体来说，我想让下降的人说当关闭和打开下拉时，您将看到选项1、选项2等。我发现了这个：它显示了如何将样式应用于正确的事物，但当我尝试应用:在选项元素之前，在任何情况下都不会出现任何情况。

浏览 4提问于2013-10-16得票数 1

回答已采纳

1回答

jQuery:从下拉结果中删除ui-自动完成样式

、、

我有一个使用jquery的自动完成的页面，对于我来说，我无法删除/修改应用于下拉列表的样式。我正在使用来自google的jquery，因此我试图避免在本地保存它并修改它:) 使用CSS，我尝试过重写UL (.ui-autocomplete)、LI的(.ui-菜单项)和LI's中的锚标记--我有很多工作要做，但是在我的CSS之后似乎出现了填充，而且当我将鼠标从列表项移到下一项时，前一项有默认的jquery-ui背景(标题中使用的灰色梯度，例如对话框标题栏)。有人手头有<

浏览 5提问于2013-06-19得票数 3

回答已采纳

点击加载更多