选择框背景颜色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的主要内容,如果未能解决你的问题,请参考以下文章