0

Working on an Angular project, using a select to edit CSS class of an object. All this is working fine but I would like to use the CSS class in the select input display.

Here's my code. I'm using css classes to define the properties.

.boldunderline {
    font-weight: bold;
    text-decoration: underline;
}
<select class="form-select form-select-sm" aria-label=".form-select-sm" [(ngModel)]="miseenpage.titredecoration" id="titredecoration" name="titredecoration">
  <option value="0">Par défaut</option>
  <option value="underline" class="underline" mat-input-element>Souligné</option>
  <option value="italic" class="italic">Italique</option>
  <option value="bold" class="bold">Gras</option>
  <option value="bolditalic" class="bolditalic">Gras et italique</option>
  <option value="underlineitalic" class="underlineitalic">Souligné et italique</option>
  <option value="boldunderline" class="boldunderline">Gras et souligné</option>
    <option value="boldunderlineitalic" class="boldunderlineitalic" >Gras, italique et souligné</option>
</select>

It's working for bold and italic but not for underlining. Is there a way to make this work?

TBA
  • 1,921
  • 4
  • 13
  • 26
MaxM
  • 45
  • 8

1 Answers1

1

https://stackoverflow.com/a/7208814/6845316 :please check this. Now we can achieve this by 2 methods only, one by using plugin as mentioned in this link or by pasting the option text as it is in option tag like : <option>t̲e̲s̲t̲ </option>. So whatever you will paste it will show that way in web.

FOR PLUGIN METHOD: https://stackoverflow.com/a/33260048/6845316

Both are workaround and typically for high level project NOT RECOMMENDED

NOTE: NOT RECOMMENDED FOR MAJOR PROJECTS

Mohammed
  • 648
  • 2
  • 12
  • 32
  • 1
    Thanks for the answer. Since it's a little project I wonder if it's worth it. Will try it someday. – MaxM Feb 18 '22 at 09:05