选择框背景颜色html

Posted

技术标签:

【中文标题】选择框背景颜色html【英文标题】:Selection box background color html 【发布时间】:2018-10-28 00:34:03 【问题描述】:

这是我的问题的参考图片。

我有一个 html 中的选择框,其颜色如上图和下面的代码所示。使用 CSS,我有一些类可以使各种 option 元素着色。如何使选定的项目也具有相同的颜色?

在图片中,红色被选中,但所选项目的背景仍然是白色。另外,有没有办法禁用悬停效果?看看当标记为orange 的项目悬停在它突出显示为蓝色时如何? (注意:按下按钮后,我使用 javascript 和 jQuery 将项目放入选择器中。)

<div class="selection">
    <select id="color">
        <option class="selectionpurple" value="purple">purple</option>
        <option class="selectionblue" value="blue">blue</option>
        <option class="selectionred" value="red">red</option>
        <option class="selectiongreen" value="green">green</option>
        <option class="selectionorange" value="orange">orange</option>
    </select>
</div>

【问题讨论】:

***.com/questions/676324/… 参考这个 这是一条漫长的道路。您想从option 获取value。然后您将其引用到color。你申请items。 %)P 【参考方案1】:

您可以使用 jquery change() 函数来实现这一点。 change() 每次选择选项时运行。您只需要获取选定选项的值并使用 jquery css() 函数将该样式应用于选择。

var selected = $("select option:selected").val();
$('select').css('backgroundColor', selected);

$( "select" ).change(function () 
    console.log($(this).val());
    $('select').css('backgroundColor', $(this).val())
)
.red 
background-color : red;

.blue 
background-color : blue;

.green 
background-color : green;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="text"> 
  <option value="red" class="red" selected>red</option> 
  <option value="blue" class="blue">blue</option>
  <option value="green" class="green">green</option>
</select>

【讨论】:

【参考方案2】:

var selected = $("select option:selected").val();
$('select').css('backgroundColor', selected);

$( "select" ).change(function () 
    console.log($(this).val());
    $('select').css('backgroundColor', $(this).val())
)
.red 
background-color : red;

.blue 
background-color : blue;

.green 
background-color : green;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="text"> 
  <option value="red" class="red" selected>red</option> 
  <option value="blue" class="blue">blue</option>
  <option value="green" class="green">green</option>
</select>

【讨论】:

以上是关于选择框背景颜色html的主要内容,如果未能解决你的问题,请参考以下文章

如何将可自定义的颜色更改框下载为带有背景图像的图像?

arcgis10.1数据框背景怎么设置白色

怎样将webstorm背景颜色

如何修改窗口背景颜色

android studio怎么设置背景颜色

使用多重绑定设置c#wpf组合框背景颜色[关闭]