Как изменить цвет фона выпадающего списка в теге select?

Question

Как изменить цвет фона выпадающего списка в теге 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, приветы это имя таблицы и название Имя столбца, присутствующего в этой таблице. имя столбца имеет около 10-15 элементов.

Вышеуказанный PHP создает раскрывающийся список (это всего лишь фрагмент, он содержит около 10-15 элементов, как указано выше) на входе, как показано ниже:

Постановка задачи:

Мне интересно, какие CSS-коды мне нужно добавить, чтобы я мог изменить цвет фона, имеющий эти 2 элемента (дома и развлечения), как показано на рисунке выше.

Код CSS, который я использовал для изменения цвета фона:

select option {
background: white;
}

3

background-color dropdown html-select php select

Решение

Accepted Answer

Вы имеете в виду, изменяя только фон 2 варианта?

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

4

Другие решения

<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

1

Если вы хотите применить цвет фона к динамическим значениям, вам следует сохранить эти значения в базе данных и получить их во время перечисления в раскрывающемся списке.
Если вы хотите применить к конкретным значениям, то вы должны определить эти значения в массиве.

<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>

0

Поскольку вы пытаетесь достичь этого с помощью CSS, вы можете назначить идентификатор для оператора select, после чего в файле CSS получить доступ к этому идентификатору и назначить цвет, который вы хотите

#select_1 {
background: dodgerblue;
}

<select id="select_1" class="form-control" id="mySelect" name="mySelect">
<option>
<option >Homes</option>
<option >Entertainment</option>
<option>Others</option>
</option>
</select>

0

Вам нужно сгенерировать функцию, которая будет возвращать случайный цвет, как этот

    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(). : '';

Вы можете написать код, как вы хотите

0

Итак, насколько я понимаю, у вас есть таблица с 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>

0

Вы близки, чтобы ответить себе

select option {
background: white;
}

но вам нужно сделать это так:

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

Также будет хорошей идеей добавить класс или идентификатор в выборку.

0

Источник

По вопросам рекламы [email protected]