Question

我正在一个正在从数据库中获取数据的网站上工作通过使用以下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代码中， hellos 是表名，而 name 是该表中存在的列的名称。 名称列包含大约10-15个元素。

上面的PHP正在前端创建一个下拉列表（它只是一个片段，如上所述，它包含大约10-15个元素）：

问题陈述：

我想知道需要添加哪些CSS代码，以便可以更改具有以上两个元素（如上图所示）的背景颜色。

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

select option {
    background: white;
}

Answer 1

您是说仅更改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>";
    }
    ?>

Answer 2

<select class="form-control" id="mySelect" name="mySelect">
        <?php
        $ArrData = ["homes","entertainment"];
        foreach($data['hellos'] as $hello) {
            $slectedColor = (in_array(strtolower($hello->name), $ArrData )) ? 'class="green"' : '';
            echo '<option value="'.$hello->hello_id.'" '.$slectedColor.'>'.$hello->name.'</option>';
        }
        ?>
</select>

示例html：

<select class="test">
    <option>Option 1</option>
    <option class="white">Option 2</option>
    <option class="green">Option 3</option>
</select>

CSS：

select {
    background:#000;
    color:#fff;
}

select * {
    background:#000;
    color:#fff;
}

select *.green {
    background:green;
    color:#fff;
}

select *.white {
    background:#fff;
    color:#000;
}

实时示例：https://codepen.io/measan/pen/OwdxXq

Answer 3

如果要将背景色应用于动态值，则应将该值存储在数据库中，并在下拉列表中列出。如果要应用于特定值，则应在数组中定义该值。

<select class="form-control" id="mySelect" name="mySelect">
        <?php
        $ArrData = ["homes","entertainment"];
        foreach($data['hellos'] as $hello) {
            $slectedColor = (in_array(strtolower($hello->name), $ArrData )) ? 'style="background:#fffff;"' : '';
            echo '<option value="'.$hello->hello_id.'" ".$slectedColor.">'.$hello->name.'</option>';
        }
        ?>
</select>

Answer 4

当您尝试通过css实现此功能时，可以为您的select语句分配一个ID，然后在css文件中访问该select ID并分配您想要的颜色

en

<xsl:param name="locales">
    <label name="testname"><locale name="de">german text</locale><locale name="en">english text</locale></label>
</xsl:param>

<xsl:template match="foo">
    <topLevelElement xmlns="http://foo.bar.org">
        <xsl:value-of select="ext:node-set($locales)/*[@name='testname']/*[@name='en']"/>
    </topLevelElement>
</xsl:template>

Answer 5

您需要生成一个将返回像这样的随机颜色的函数

    function generateRandomColor()
    {
        $color = '#';
        $colorLighter = array("9","A","B","C","D","E","F" );
        for($x=0; $x < 6; $x++){
            $color .= $colorLighter[array_rand($colorLighter, 1)]  ; 
             }            
        return substr($color, 0, 7);
    }

在您的选项中，您需要调用此函数而不是提供颜色代码。

$slectedColor = (in_array(strtolower($hello->name), $ArrData )) ? 'style="background:".$this->generateRandomColor(). : '';

您可以根据需要编写代码

Answer 6

据我了解，您的表格中包含10到15个内容，这些显示为我正在猜测的菜单，您需要以不同的颜色显示它们，

如果这是正确的，并且您有办法像数组中指向该变量的变量一样区分它们，那么可以。

（如果“ color_pointer”为1，则颜色为绿色）。

CSS

.color_green {
  background:green;
  color: Brown;
}
.color_normal {
  background:white;
  color: Black
}

** PHP **

$data['hellos'] = array(
array('name' => 'Home','color_pointer' => 1,...),
array('name' => 'Entertainment','color_pointer' => 1,... ),
array('name' => 'contact','color_pointer' => 0,... ),
);

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

Answer 7

您即将回答自己：

select option {
    background: white;
}

但是您需要那样做：

select>option:first-child, select>option:nth-child(2) {
    background: white; /*or any other color*/
}

另外，最好在选择中添加类或ID。

如何更改选择标签中的下拉列表的背景颜色？

7 个答案: