Mozilla Firefox中带有select标记的表单控件显示文本,但Chrome中的相同组件不显示

<select size=“15”class=“form control mr-4”>
<optgroup label=“属性”>
<option*ngfor=“让数据结果的每个值”
[所选]=“searchModel.translatedProperty==eachval.translatedProperty”
(click)=“获取属性值(eachval)”>
<SPAN>eachval.translated属性</SPAN>
</选项>
</optgroup>
<optgroup label=“参考”>
<option*ngfor=“让对象的每个值;让我=索引;”
[所选]=“searchModel.translatedProperty==eachval.translatedProperty”
(click)=“获取引用值(eachval,i)”>
<SPAN>eachval.translated属性</SPAN>
</选项>
</optgroup>


我使用form controlas a class toselectas recorded in the bootstrap forms documentationsource


这将呈现以下列表:

Mozilla火狐

在Mozilla Firefox中



相反地

谷歌Chrome

文本存在,但呈现的不是黑色字体颜色


是什么导致了这个渲染问题。我没有任何过火的styles.css。


css是什么?以确保select标记列表在所有浏览器中呈现。component.html如下:


                    <select size="15" class="form-control mr-4">
                        <optgroup label="Properties">
                            <option *ngFor="let eachVal of dataResults"
                                    [selected]="searchModel.translatedProperty===eachVal.translatedProperty"
                                    (click)="getPropertyValues(eachVal)">
                                <span>{{eachVal.translatedProperty}}</span>
                            </option>
                        </optgroup>
                        <optgroup label="References">
                            <option *ngFor="let eachVal of objResults; let i=index;"
                                    [selected]="searchModel.translatedProperty===eachVal.translatedProperty"
                                    (click)="getReferenceValues(eachVal, i)">
                                <span>{{eachVal.translatedProperty}}</span>
                            </option>
                        </optgroup>




我使用form-control作为一个班级选择如引导程序表单文档中所述source

这将呈现以下列表:

Mozilla火狐

在Mozilla Firefox中v.60.0.2



相反地

谷歌浏览器

文本存在,但呈现的不是黑色字体颜色


是什么导致了这个渲染问题。我没有什么过分的烦恼styles.css.

什么是css以确保选择标记列表在所有浏览器中呈现。