无选择和选项标签的角反应形式下拉菜单

Question

我在设置下拉菜单样式时遇到困难：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#Styling_with_CSS

众所周知，很难使用CSS有效地设置select元素的样式。

总而言之，即使结合使用，您也无法在选项和选择标签上使用任何技巧。

我很乐意继续使用反应形式，但我希望仅通过使用<div>标签来绘制和使用反应形式的下拉列表来净化html和CSS。

这可能吗？

这里是我今天的代码。

// this.statusForm = this.fb.group({
//    status: ['Delivered', Validators.required]
// });

<form [formGroup]="statusForm">
   <div>
      <select formControlName="status">
         <option value="Delivered">Delivered</option><!--&#xf00c;-->
         <option value="Cancelled">Cancelled</option><!--&#xf05e;-->
         <option value="UndeliveredTechnicalissue">Undelivered/Technical issue</option><!--&#xf00d;-->
      </select>
   </div>
</form>

js只是FormBuilder的水合。

我可以使用]收集/ console.log（）值>

 this.statusForm.value.status;

我在下拉菜单中遇到了样式设置问题：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#Styling_with_CSS众所周知，select元素很难用...有效地样式化。

Answer 1

您将“选项”部分创建为ul> li或div，然后相应地设置其样式。