Select option change appearance

Question

Is it possible to display my dropdown like the picture attached?

My current dropdown

How the dorpdown should look like

the code looks like that:

   <select #emoji class="textboxclass" type="text" placeholder="Choose your mood" aria-label="Post" formControlName="emoji" required>
            <option value="" selected disabled hidden></option>
            <option *ngFor="let emoji of emojis" [ngValue]="emoji.value">
              {{ emoji.displayValue }}
            </option>
   </select>

The following are some of the emoyis I use to display in the dropdown:

  emojis = [
      {
        displayValue: '',
        value: 'happy'
      },
      {
        displayValue: '',
        value: 'blushed'
      },
      {
        displayValue: '',
        value: 'grinning'
      },
      {
        displayValue: '',
        value: 'confused'
      },
      {
        displayValue: '',
        value: 'happy3'
      },
      {
        displayValue: '',
        value: 'happy4'
      },
      {
        displayValue: '',
          value: 'happy5'
      },
      {
        displayValue: '',
        value: 'sick'
      },
      {
        displayValue: '',
        value: 'astonished'
      },
      {
        displayValue: '',
        value: 'cold'
      },
      {
        displayValue: '',
        value: 'cry'
      }
  ];

possible add your actual code so can able to help. Create fiddle or snippet. — Avinash Dalvi, May 29 '20 at 11:37
this will not help to solve issue because then user have to create their own list of icons. asking jsfiddle. — Avinash Dalvi, May 29 '20 at 12:02
You should create custom template for this rather than using select — mr. pc_coder, May 29 '20 at 12:02
one mode to avoid this is to create a popup (mat-dialog or bootstrap modal if you use one of these) and display your emoticons as a grid with 8 columns, rennouncing at select. — AlleXyS, May 29 '20 at 12:11
Yeah, you won't be able to achieve this using only css and select tags. You will need to develop your own custom dropdown for this: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select — Gh05d, May 29 '20 at 12:24
@AlleXyS do you have a tip how to do it with bootstrap modal? — Jan Masta, May 30 '20 at 12:13
a good example here: https://stackoverflow.com/questions/49543103/angular-cli-open-component-in-modal. You just pass your array into modal as parameter — AlleXyS, May 30 '20 at 12:51

Select option change appearance

0 Answers0