'Underline a boostrap select option

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?

cssangular


Solution 1:[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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mohammed

Related Questions