如何仅将 CSS 背景颜色应用于所选选项?如果我将一个类应用于选择对象,它会设置所有选项的样式。如果我将所需的类应用于选项,则在展开选择框时,我可以看到所有选项的样式都很好。但是,当“选择”框折叠时,所选选项的样式消失。我在最新版本的 Chrome 和 Firefox 中观察到这种行为。
这是一些超级基本的示例代码。如果没有 jQuery,所选选项始终显示为无样式。使用 jQuery,一旦选择了“已修改”选项,所有选项的样式都将被设置为“已修改”。我一直无法找到解决这个问题的方法......有什么想法吗?
我不想更改选项的样式。只有在选择任何给定选项时才能看到其样式,而不会覆盖其他选项的样式。
<style>
select.modified,
option.modified{
background-color: red;
}
</style>
<select id="example">
<option value="bird" class="modified">bird</option>
<option value="cat">cat</option>
<option value="dog" class="modified">dog</option>
</select>
<script>
$('#example').on('change',function(){
$(this).prop('class',$(this).find('option:selected').prop('class'));
});
</script>