如何更改SELECT标签中下拉列表的背景色? [英] How to change the background color of dropdown list in select tag?

查看:51
本文介绍了如何更改SELECT标签中下拉列表的背景色?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在一个网站上工作,我在该网站中从数据库获取数据 使用以下php代码:

<select class="form-control" id="mySelect" name="mySelect">
        <?php
        foreach($data['hellos'] as $hello) {
            echo '<option value="'.$hello->hello_id.'">'.$hello->name.'</option>';
        }
        ?>
</select>

在上面的php代码中,hello是表名,name是该表中的列名。名称列大约有10-15个元素。


上面的PHP在前端创建了一个下拉列表(它只是一个代码片段,如上所述,它大约有10-15个元素),如下所示:


问题陈述:

我想知道我需要添加哪些CSS代码,以便可以更改具有这两个元素(Home和Entertainment)的背景色,如上图所示。

我用来更改背景颜色的CSS代码是:

select option {
    background: white;
}

推荐答案

您的意思是只更改%2选项的背景吗?

<select>
<option></option>
<option style = 'background-color:green;'>Homes</option>
<option style = 'background-color:green;'>Entertainment</option>
<option>Others</option>
</select>

在您的php上,您可以这样应用

 <select class="form-control" id="mySelect" name="mySelect">
    <?php
    foreach($data['hellos'] as $hello) {
        $match = array('Homes','Entertainment');
        $color = (in_array($hello->id, $match)) ? " style = background-color:green; " : "";
        echo "<option value='".$hello->hello_id."' " . $color . ">".$hello->name."</option>";
    }
    ?>

更新 如果您只想更改选项的背景色,只需在选项中添加内联样式

<select class="form-control" id="mySelect" name="mySelect">
    <?php
    foreach($data['hellos'] as $hello) {
        echo "<option value='".$hello->hello_id."' style = background-color:green;>".$hello->name."</option>";
    }
    ?>

这篇关于如何更改SELECT标签中下拉列表的背景色?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆