Filament•3mo ago

Changing Selected Item background and text color in Select input

Hello everyone, I have a model which has two columns named background_color and text_color. Is there any way I can change the background and text color of the selected record according to the value of these columns?

9 Replies

awcodes•3mo ago

Don’t think that is possible with this component. Sorry.

Azad Furkan ŞAKAROP•3mo ago

I just had a little hope. 🥲 Thank you. 🙏

Will 🇬🇹•3mo ago

Something like this maybe?

Select::make('test_colors')
  ->label('Example')
  ->native(false)
  ->multiple()
  ->allowHtml()
  ->options(function () {
    $options = [
      [
        'id' => 1,
        'name' => 'Red',
        'bg_color' => '#ff0000',
        'text_color' => '#ffffff',
      ],
      [
        'id' => 2,
        'name' => 'Green',
        'bg_color' => '#00ff00',
        'text_color' => '#000000',
      ],
      [
        'id' => 3,
        'name' => 'Blue',
        'bg_color' => '#0000ff',
        'text_color' => '#ffffff',
      ],
  ];

  $result = [];
  foreach($options as $key => $option) {
    $result = array_merge($result, [ $option['id'] => "<p style='padding-left:5px; background-color: {$option['bg_color']}; color: {$option['text_color']}'>{$option['name']}</p>"]);
  }

  return $result;
}),

Select::make('test_colors')
  ->label('Example')
  ->native(false)
  ->multiple()
  ->allowHtml()
  ->options(function () {
    $options = [
      [
        'id' => 1,
        'name' => 'Red',
        'bg_color' => '#ff0000',
        'text_color' => '#ffffff',
      ],
      [
        'id' => 2,
        'name' => 'Green',
        'bg_color' => '#00ff00',
        'text_color' => '#000000',
      ],
      [
        'id' => 3,
        'name' => 'Blue',
        'bg_color' => '#0000ff',
        'text_color' => '#ffffff',
      ],
  ];

  $result = [];
  foreach($options as $key => $option) {
    $result = array_merge($result, [ $option['id'] => "<p style='padding-left:5px; background-color: {$option['bg_color']}; color: {$option['text_color']}'>{$option['name']}</p>"]);
  }

  return $result;
}),

Azad Furkan ŞAKAROP•3mo ago

Thank you for your answer but i did it already and you can do this with ->allowHtml() and ->getOptionLabelFromRecordUsing() methods. I want to change colors of the whole "badge" container. Something like this

Azad Furkan ŞAKAROP•3mo ago

but more clean way of course, deselect icon and border/ring colors too.

Will 🇬🇹•3mo ago

Nice, I mean it could look a bit better but your approach is not bad at all 🙂 Maybe share your code to help other in the future

awcodes•3mo ago

Good job.👏

Azad Furkan ŞAKAROP•3mo ago

I think I was misunderstood, sorry, I haven't realised this yet. The image I showed as an example was ‘exactly what I wanted to do’. I do same thing with as you talk about like this;

// Custom Select for Categories
protected function setUp(): void
    {
        parent::setUp();

        $this->relationship(titleAttribute: 'name')
            ->label('Categories')
            ->preload()
            ->multiple()
            ->createOptionAction(fn ($action) => $action->slideOver()->modalWidth('2xl')->modalHeading('Create New Category'))
            ->allowHtml()
            ->getOptionLabelFromRecordUsing(function ($record) {
                return "<span style='padding: 2px 4px; border-radius: 5px; color: {$record->text_color}; background-color: {$record->background_color};'>{$record->name}</span>";
            })
            ->createOptionForm([
                TranslatableInput::make([
                    TextWithSlugInput::make(
                        titleColumn: 'name',
                    ),
                ])->onlyMainLocaleRequired(),
                Forms\Components\Grid::make()
                    ->schema([
                        Forms\Components\ColorPicker::make('text_color')
                            ->label('Text Color')
                            ->nullable(),
                        Forms\Components\ColorPicker::make('background_color')
                            ->label('Background Color')
                            ->nullable(),
                    ]),
            ]);
    }

// Custom Select for Categories
protected function setUp(): void
    {
        parent::setUp();

        $this->relationship(titleAttribute: 'name')
            ->label('Categories')
            ->preload()
            ->multiple()
            ->createOptionAction(fn ($action) => $action->slideOver()->modalWidth('2xl')->modalHeading('Create New Category'))
            ->allowHtml()
            ->getOptionLabelFromRecordUsing(function ($record) {
                return "<span style='padding: 2px 4px; border-radius: 5px; color: {$record->text_color}; background-color: {$record->background_color};'>{$record->name}</span>";
            })
            ->createOptionForm([
                TranslatableInput::make([
                    TextWithSlugInput::make(
                        titleColumn: 'name',
                    ),
                ])->onlyMainLocaleRequired(),
                Forms\Components\Grid::make()
                    ->schema([
                        Forms\Components\ColorPicker::make('text_color')
                            ->label('Text Color')
                            ->nullable(),
                        Forms\Components\ColorPicker::make('background_color')
                            ->label('Background Color')
                            ->nullable(),
                    ]),
            ]);
    }

Azad Furkan ŞAKAROP•3mo ago

Sooooo, i did something but it still doesn't work properly. I have to tinker a little more.

Gaming

Programming

Changing Selected Item background and text color in Select input

Did you find this page helpful?