0

I'm trying to add single pixel into selectbox before text of each option.

I'm green-yellow colorblind, I made this only so you know what I would like to achieve(dont expect that colors will be accurate): enter image description here

My html takes options out of foreach loop

<select name="selectbox" class="form-control">
     <option value=""></option>
   <? foreach ($this->color as $item): ?>
     <option value="<?= $item ?>" <? if ($item == $this->model['item']): ?> selected<? endif ?> > <?= $item ?> </option>
   <? endforeach ?>
</select>

which loops by controller function and returns view:

return $this->view //->assign('groups', $this->model->getGroups())
            ->assign('color', ['Text of Orange', 'Text of Red ', 'Text of Blue', 'Text of Yellow'])
            ->assign('something', $something)

To achieve that

I tried imagesetpixel and imagepng functions but it returns me boolean, and I dont know how could I possibly progress...

$gd = imagecreatetruecolor(1, 1);
$red = imagecolorallocate($gd, 255, 0, 0); 
$canvas = imagesetpixel($gd, 1, 1, $red);

return $this->view
            ->assign('color', [imagepng($canvas) + 'Text of Orange', 'Text of Red ', 'Text of Blue', 'Text of Yellow'])

I made only 1 color, but I hope you got the idea of what I need.

Quiet Molly
  • 102
  • 1
  • 7
  • 2
    HTML `select` only supports text, not graphics or anything. Maybe look into plugins such as select2 or similar which can help you achieve this kind of functionality. – ADyson Jun 24 '22 at 13:22
  • Some browsers allow background images for options, https://stackoverflow.com/questions/11207223/how-to-add-background-image-for-options-in-a-select-box If you need more than that, you will probably need a custom solution though. – CBroe Jun 24 '22 at 13:30
  • Use https://select2.org/ ! – vinceAmstoutz Jun 24 '22 at 13:32

0 Answers0