当前位置: 首页 > 知识库问答 >
问题:

以其他颜色更改选择选项时出现问题 [重复]

颜永怡
2023-03-14

我已经创建了一个选择。但是我不知道如何在选项区域中将蓝色边框和悬停背景更改为另一种颜色……

你们有适合我的解决方案吗?

我的代码:

<select name="slct2" id="slct2" required title="">
              <!-- Options -->
              <option value="" hidden>Jahr</option>
              <option>2020</option>
              <option>2019</option>
      </select>

共有2个答案

许丁雷
2023-03-14

你是这个样子吗?

select {
  width: 150px;
  margin: 50px;
  padding: 5px 35px 5px 5px;
  font-size: 16px;
  border: 1px solid #CCC;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(https://image.flaticon.com/icons/png/512/61/61041.png)
  96% / 15% no-repeat #EEE;
    outline:none;
}
option:hover{
background:coral
}
<select name="slct2" id="slct2" required title="">
  <option value="" hidden>Jahr</option>
  <option>2020</option>
  <option>2019</option>
  <option>2018</option>
 </select>
白宏义
2023-03-14

蓝色边框可以通过以下方式更改

select {outline: none;}

但据我所知,您无法更改选择选项的颜色,因为这是由浏览器本身呈现的,并且还取决于操作系统(蓝色表示Windows,橙色表示ubuntu,...)。如果真的有必要,您始终可以做的是创建自定义下拉列表,但这涉及相当多的工作(例如:https://dev.to/emmabostian/creating-a-custom-accessible-drop-down-3gmo)。

 类似资料:
  • 我有一个选择框,当选择框被单击并显示所有选项时,我正在尝试更改选项的背景颜色。

  • 问题内容: 在浏览器中选择文本时,大多数情况下选中的文本后面的背景会变为蓝色。如何将这种颜色更改为另一种颜色? 问题答案: 您正在寻找伪元素。 另外,作为旁注。如果你计划在所有使用文本的影子在你的网站,我建议将你的造型。正如你可以看到在这个小提琴,它的眼睛真的很辛苦。

  • 问题内容: 我有一个选择框。通过已引用的CSS文件,已使用不同的颜色来设置选项的样式。我希望能够选择一个选项,然后将关闭的选择框的文本颜色更改为所选选项的颜色。 因此,如果我选择“香蕉”,则文本应从黄色变为红色。 我努力了: 但这仅在我在html文档内的选项标签中定义样式时才有效。 我也尝试过JavaScript: 但这总是返回颜色:白色。getStyle函数在我使用过的其他任何地方都可以使用,因

  • 我正在尝试在选择选项中更改选择的颜色。我试图这样做: 但它不起作用。这只适用于简单文本,不适用于选项。有什么方法可以改变选择的颜色吗?我不需要更改所选选项的背景。我需要改变选择的颜色。

  • 我希望,如果我选择“mammals”,动物选择选项只显示值为1的选项data-animal_class。 我知道如何获得哺乳动物值,但我不知道如何使用过滤器 这是我的代码:

  • 问题内容: 我正在尝试将第一个选项的颜色更改为灰色,即只有文本(选择一个选项),但是在这里无法正常工作: 问题答案: Suresh,您不需要在代码中使用任何内容。您需要的是这样的东西: 但是正如您所看到的,因为选项中的第一项是选择控件显示的第一件事,所以您看不到其分配的颜色。如果您打开选择列表并看到已打开的项目,则会看到可以为第一个选项分配灰色。因此,您需要jQuery中的其他功能。