0

I have a question regarding the datalist style. I got a code that removes the little arrow that is in the input (default in the Chrome browser). But now I can't find a way to style the suggestion box with CSS. I'm using Angular 15

HTML

<input type="text" class="form-control" role="search" list="impostoBox" id="impostoInp" style="position: relative;" name="impostoBox" aria label="Selecione o Imposto" tabindex="0" placeholder="Selecionar ou Digitar" [(ngModel)]="impostoValue" (change)="seleImp($event)">
<span for="impostoInp" class="material-symbols-outlined iconSelect525" aria-hidden="true">expand_more</span>
<datalist id="impostoBox">
    <option *ngFor="let i of opImposto" [value]="i.name">{{i.name}</option>
</datalist>

SCSS

[list]::-webkit-calendar-picker-indicator {
    opacity: 0;
}

I have code that removes the arrow but I cannot style the suggestion box in the form.

JGallardo
  • 11,074
  • 10
  • 82
  • 96
Bruna Bergami
  • 1
  • your intent is to know how to target the form input with CSS? Portugues: sua intenção é saber como estilizar a caixa com CSS? – JGallardo Feb 14 '23 at 21:56
  • If i understand what you are trying to do, see these links for some tips: https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-an-html-select-element https://www.dofactory.com/html/option/style#:~:text=The%20style%20attribute%20specifies%20the,or%20an%20external%20CSS%20file. https://ej2.syncfusion.com/angular/documentation/drop-down-list/style – JGallardo Feb 14 '23 at 21:58
  • `datalist` is similar to `select` where styling is somewhat limited and every browser looks slightly different. This is why there are so many "plug-ins" and "add-ons" for these that overlay the actual with visual elements you CAN style – Mark Schultheiss Feb 14 '23 at 22:51

1 Answers1

0

What you're trying to do is to add a custom styling to datalist which is controlled by the user's browser settings and cannot be directly modified with SCSS selector as you're doing.

Try to use a 3rd party lib to add custom styling and that will do the job.

Hamza Hsn
  • 74
  • 4