angular中通过CSS使下拉列表默认值变灰
angular版本：angular5
先看效果图：
drop down的样式是我用CSS样式控制的，没有用插件。想要改变Drop Down List里的默认值的颜色，我的思路是这样的。
在
如果为空，entityFlag的值就是true，选中的值就是默认值，会用你定义的样式(thisSelectFirstItem)。在这个样式里改变text的颜色。
先看html代码：
1 <select class="dropEntityNameCss" [ngClass] = "{'thisSelectFirstItem':entityFlag}" [(ngModel)]="dropEntiyName" name="dropEntiyName" (ngModelChange)="dropEntityNameChange(dropEntiyName)"> 2 <option selected value="">Default Valueoption> 3 <option value="1">Test Value1option> 4 <option value="2">Test Value2option> 5 select>
在贴上TS代码：
1 // css control flag 2 entityFlag: boolean = true; 3 resonFlag: boolean = true; 4 5 constructor() { } 6 7 ngOnInit() { } 8 dropEntityNameChange(inputDropName: string) { 9 if (inputDropName.length === 0 ) { 10 this.entityFlag = true; 11 } else { 12 this.entityFlag = false; 13 } 14 }
最后贴上改变默认值的CSS样式：
1 select.thisSelectFirstItem { 2 -webkit-text-fill-color: #999999; 3 }
在CSS样式里只能用“-webkit-text-fill-color:”属性，别的没效果。